Amcharts 4 LineSeries 图例颜色与图形颜色不匹配

Question

我使用 AmCharts 版本 4 创建了一个系列图表。我有一条红线表示已创建的案例，绿线表示已关闭的案例。但是，我的两条线的图例都是蓝色的。如何让图例颜色适合图表颜色？

我在数据部分添加了颜色。

我的代码在这里：

<script>
am4core.ready(function() {
    var chart = am4core.create("chartdiv_cases_created_per_day", am4charts.XYChart);
    chart.data = [
    {
        "x": "Mon 1",
        "created_value": 1,
        "created_color": am4core.color("red"),
        "closed_value": 2,
        "closed_color": am4core.color("green")
    },
    {
        "x": "Tue 2",
        "created_value": 4,
        "created_color": am4core.color("red"),
        "closed_value": 2,
        "closed_color": am4core.color("green")
    },
    {
        "x": "Wed 3",
        "created_value": 3,
        "created_color": am4core.color("red"),
        "closed_value": 1,
        "closed_color": am4core.color("green")
    }
    ];
    // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "x";
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());


    // Create series
    var series1 = chart.series.push(new am4charts.LineSeries());
    series1.dataFields.valueY = "created_value";
    series1.dataFields.categoryX = "x";
    series1.name = "Opprettet";
    series1.propertyFields.stroke = "created_color";
    series1.propertyFields.fill = "created_color";
    series1.strokeWidth = 1;
    series1.tooltipText = "Opprettet: {valueY}";

    // Create series 2
    var series2 = chart.series.push(new am4charts.LineSeries());
    series2.dataFields.valueY = "closed_value";
    series2.dataFields.categoryX = "x";
    series2.name = "Lukket";
    series2.propertyFields.stroke = "closed_color";
    series2.propertyFields.fill = "closed_color";
    series2.tooltipText = "Lukket: {valueY}";

    // Legend
    chart.legend = new am4charts.Legend();
    chart.legend.labels.template.text = "[bold {color}]{name}[/]";


    // Tooltips
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.snapToSeries = series;
    chart.cursor.xAxis = valueAxis;



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

<div id="chartdiv_cases_created_per_day" style="height: 300px;"></div>

Answer 1

您似乎在结合数据和 js 对象。这可能是您想要的，但我可能会建议您将它们分开，因为这会让您在需要从服务器添加数据的那一天更容易。

无需为每个点添加颜色。您很可能希望同一系列中的所有点都使用相同的颜色。

你可以这样实现：

  series.stroke = am4core.color(color);
  series.fill = am4core.color(color);

您已经将数据中的系列命名为 created_value 和 closed_value，因此我们可以轻松创建一个添加数据、命名系列并为其着色的函数:)

你在哪一回合跟注

createSeries("created_value", "Created", "red");
createSeries("closed_value", "Closed", "green");

完整代码（我确定您可以进行更多重构）：

am4core.useTheme(am4themes_animated); // Not needed, but looks cool ;)

// Create chart instance
var chart = am4core.create("chartdiv_cases_created_per_day", am4charts.XYChart);

// Add data
chart.data = [{
  "date": new Date(2018, 0, 1),
  "created_value": 362,
  "closed_value": 699
}, {
  "date": new Date(2018, 0, 2),
  "created_value": 269,
  "closed_value": 450
}, {
  "date": new Date(2018, 0, 3),
  "created_value": 700,
  "closed_value": 358
}, {
  "date": new Date(2018, 0, 4),
  "created_value": 490,
  "closed_value": 367
}, {
  "date": new Date(2018, 0, 5),
  "created_value": 500,
  "closed_value": 485
}, {
  "date": new Date(2018, 0, 6),
  "created_value": 550,
  "closed_value": 354
}, {
  "date": new Date(2018, 0, 7),
  "created_value": 420,
  "closed_value": 350,
}];

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 30;

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

// Create series
function createSeries(field, name, color) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.dateX = "date";
  series.name = name;
  series.tooltipText = "{dateX}: [b]{valueY}[/]";
  series.strokeWidth = 2;
  series.stroke = am4core.color(color);
  series.fill = am4core.color(color);
  
  // Set up tooltip
  series.adapter.add("tooltipText", function(ev) {
    var text = "[bold]{dateX}[/]\n"
    chart.series.each(function(item) {
      text += "[" + item.stroke.hex + "]●[/] " + item.name + ": {" + item.dataFields.valueY + "}\n";
    });
    return text;
  });
  
  series.tooltip.getFillFromObject = false;
  series.tooltip.background.fill = am4core.color("#fff");
  series.tooltip.label.fill = am4core.color("#00");
  
  var bullet = series.bullets.push(new am4charts.CircleBullet());
  bullet.circle.stroke = am4core.color("#fff");
  bullet.circle.strokeWidth = 2;
  
  return series;
}

createSeries("created_value", "Åpnet", "red");
createSeries("closed_value", "Lukket", "green");

chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
chart.cursor.maxTooltipDistance = 0;

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv_cases_created_per_day"></div>

Amcharts 4 LineSeries 图例颜色与图形颜色不匹配

Am charts 4 LineSeries legend colors doesn't match graph colors

amcharts4