0

我想将 amcharts 中相同列的颜色更改为第一个绿色为红色，第二个为绿色作为账单。系列图表定义堆叠列的颜色，但同一列的颜色不同 [demo] ( 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();
});
4

1 回答 1

2

是的，我已经修复了这里 的演示 。刚刚采用了一个新系列，其中包含空值和不同颜色应用于同一系列

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;
于 2019-06-04T07:55:42.717 回答