Amcharts разные цвета одного и того же столбца в xycharts - PullRequest
Новая
       13

Amcharts разные цвета одного и того же столбца в xycharts

0 голосов
/ 03 июня 2019

Я хочу изменить цвет тех же столбцов в амхартах, как 1-й зеленый цвет на красный и второй на зеленый для счета.Диаграммы серии определяют цвет для столбца с накоплением, но не различают цвет для того же столбца [демо] (https://jsfiddle.net/rfgwaohp/) здесь 

am4core.ready(function() {
am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_kelly);

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

chart.marginRight = 400;

// Add data
chart.data = [{
  "retailer": "Current",
  "bill": 120,
  "saving": null
}, {
  "retailer": "New",
  "bill": -90,
  "saving": 219
}];


var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "retailer";
categoryAxis.title.text = "";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.labels.template.disabled = true;


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

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "bill";
series.dataFields.categoryX = "retailer";
series.name = "Bill";
series.fill = "#00af50";
series.stroke = "#00af50";
series.color = "#f2f2f2";
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.stacked = true;

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "saving";
series2.dataFields.categoryX = "retailer";
series2.name = "Saving";
series2.fill = "#f2f2f2";
series2.stroke = "#f2f2f2";
series2.color = "#00af50";
series2.tooltipText = "{name}: [bold]{valueY}[/]";
series2.stacked = true;

chart.cursor = new am4charts.XYCursor();
});

1 Ответ

0 голосов
/ 04 июня 2019

Да, я исправил Здесь demo . Только что взяли новую серию с нулевым значением и другим цветом, примененным к той же серии 

chart.data = [{
      "retailer": "Current",
      "bill": null,
      "bill2": 600  ,
      "saving": null
    }, {
      "retailer": "New",
      "bill": 400,
      "bill2": null,
      "saving": 200
    }];

  var series3 = chart.series.push(new am4charts.ColumnSeries());
    series3.dataFields.valueY = "bill2";
    series3.dataFields.categoryX = "retailer";
    series3.name = "Bill";
    series3.fill = "red";
    series3.stroke = "red";
    series3.color = "red";
    series3.tooltipText = "{name}: [bold]{valueY}[/]";
    series3.stacked = true;
...