更改 amCharts 制作的 JavaScript 折线图中的线条颜色

Question

我正在使用 amCharts 创建带有 amCharts 的 JavaScript 折线图。 amCharts 是一个很棒的开源第三方插件，类似于 chart.js 用于数据可视化，但它的 javascript 代码令人困惑。

在演示折线图中，我想将线条的颜色从蓝色更改为红色（或任何其他颜色）。与 chart.js 不同，我没有在演示图表中找到允许我添加颜色参数的位置。此演示折线图HTML中的JavaScript代码为：

<html>

   <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        #chartdiv {
            height: 500px;
        }
    </style>
   </head>
   <body>
        <div id="selectordiv"></div>
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Area Chart</h6>
            </div>
            <div class="card-body">
                <div class="chart-line">
                    <div id="chartdiv"></div>
                </div>
            </div>
        </div>
       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
       <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>
        <script src="https://cdn.amcharts.com/lib/4/plugins/rangeSelector.js"></script>
        <script>
            am4core.useTheme(am4themes_animated);
            var chart = am4core.create("chartdiv", am4charts.XYChart);
            chart.paddingRight = 20;

            var data = [];
            var visits = 10;
            for (var i = 1; i < 50000; i++) {
                visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
                data.push({
                    date: new Date(2018, 0, i),
                    value: visits
                });
            }

            chart.data = data;

            var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
            dateAxis.renderer.grid.template.location = 0;
            dateAxis.minZoomCount = 5;

            dateAxis.groupData = true;
            dateAxis.groupCount = 500;

            var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

            var series = chart.series.push(new am4charts.LineSeries());
            series.dataFields.dateX = "date";
            series.dataFields.valueY = "value";
            series.tooltipText = "{valueY}";
            series.tooltip.pointerOrientation = "vertical";
            series.tooltip.background.fillOpacity = 0.5;

            chart.cursor = new am4charts.XYCursor();
            chart.cursor.xAxis = dateAxis;

            var scrollbarX = new am4core.Scrollbar();
            scrollbarX.marginBottom = 20;
            chart.scrollbarX = scrollbarX;

            var selector = new am4plugins_rangeSelector.DateAxisRangeSelector();
            selector.container = document.getElementById("selectordiv");
            selector.axis = dateAxis;      


// Add DatePicker
selector.events.on("drawn", function(ev) {
  $(".amcharts-range-selector-range-wrapper input").datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function() {
      selector.updateZoom();
    }
  });
});    
            
            
        </script>
   </body>
    
    
    
    
    
    
    
    
</html>

图表的输出是：

Answer 1

随着属性stroke: am5.color('hexColor')

        var series = chart.series.push(
          am5xy.LineSeries.new(root, {
            name: "Series",
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: "value",
            valueXField: "date",
            stroke: am5.color('#f00'), // this property
            tooltip: am5.Tooltip.new(root, {
              labelText: "{valueY}",
            }),
          })
        );

参考：https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/ & https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/

更改 amCharts 制作的 JavaScript 折线图中的线条颜色

Change the line color in a JavaScript line chart made by amCharts

javascript

charts

amcharts