На графиках 4 цвета легенды LineSeries не соответствуют цветам графиков - PullRequest
Новая
       10

На графиках 4 цвета легенды LineSeries не соответствуют цветам графиков

1 голос
/ 17 апреля 2020

Я создал диаграмму серии с использованием AmCharts версии 4. У меня есть красная линия, которая представляет созданные случаи, и зеленая линия, которые представляют закрытые случаи. Однако моя легенда синяя для обеих линий. Как я могу получить цвет легенды, чтобы соответствовать цвету графика?

Я добавил цвет в разделе данных.

enter image description here

Мой код здесь: 

<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>

1 Ответ

1 голос
/ 17 апреля 2020

Похоже, вы объединяете данные и 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>
...