微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在整个图表上将amchart文本更改为白色

如何解决如何在整个图表上将amchart文本更改为白色

我希望背景完全变暗(#00000),为此,我必须将文本切换(任何地方都变为白色)。我试图用css来操纵它,但无法弄清楚我们是怎么做的。我的想法是要在css中完成它(如字体),但是代码不会影响最终结果。

尝试:
颜色:#FF0000!重要

我的amchart代码

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;  
  font-family:verdana,helvetica,arial,sans-serif;
}
 
}

</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->

<script>
am4core.ready(function() {
 

// Themes begin
am4core.useTheme(am4themes_animated); 
// Themes end

var chart = am4core.create("chartdiv",am4charts.XYChart);

//background
chart.background.fill = '#000'
chart.background.opacity = 0.3
 

// Enable export
chart.exporting.menu = new am4core.ExportMenu();

var data = [];

chart.data = [

    {
      "year": "2019","RRK": 455,"MPO": 455,"MCO": 455,"ZZA":455,"KXC":455,"LPO":455,},{
      "year": "2020","RRK": 402,"MPO": 459,"MCO": 468,"ZZA":470,"KXC":477,"LPO":484,{
      "year": "2025","RRK": 409,"MPO": 481,"MCO": 634,"ZZA":649,"KXC":635,"LPO":667,{
      "year": "2030","MCO": 512,"ZZA":550,"KXC":504,"LPO":568,];

const r = ['RRK','MPO','MCO','ZZA','KXC','LPO']
const colors = ['#ff0000','#ff66cc','#ff6666','#ffd966','#1a0011','#e60099']
chart.colors.step = 2;

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.ticks.template.disabled = true;
categoryAxis.renderer.line.opacity = 0;
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.minGriddistance = 40;
categoryAxis.datafields.category = "year";
categoryAxis.startLocation = 0.4;
categoryAxis.endLocation = 0.6;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.line.opacity = 0;
valueAxis.renderer.ticks.template.disabled = true;
valueAxis.min = 320; 
valueAxis.title.text = "BBPU";
valueAxis.title.color = "red";
    
for (var i=0; i<r.length; i++)
{
    const myName = r[i]; 
    const myColor = colors[i];

    var lineseries = chart.series.push(new am4charts.Lineseries());
    lineseries.datafields.categoryX = "year";
    lineseries.name = myName;
    lineseries.datafields.valueY = myName;
    lineseries.tooltipText = myName+": [bold]{valueY}[/]";
    //lineseries.fillOpacity = 0.05;
    lineseries.strokeWidth = 2;  
    lineseries.propertyFields.stroke = "lineColor";
    //lineseries.propertyFields.fill = "lineColor";
    //lineseries.tensionX = 0.57;

 
    var bullet = lineseries.bullets.push(new am4charts.CircleBullet());
    bullet.circle.radius = 4;
    bullet.circle.fill = am4core.color("#fff");
    bullet.circle.strokeWidth = 3;
 
} 

/* Add legend */
chart.legend = new am4charts.Legend();
chart.legend.maxWidth = 300;

// title
var title = chart.titles.create();
title.text = "Comparison of X vs Y";
title.fontSize = 25;
title.marginBottom = 30;

chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panX";
chart.cursor.lineX.opacity = 0;
chart.cursor.lineY.opacity = 0;
chart.cursor.lineX.fill = am4core.color("#8F3985");

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.parent = chart.bottomAxesContainer;

// Add vertical scrollbar
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.marginLeft = 0;

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。