Question

我想将同一行中的相同列的颜色更改为第一个绿色，如红色，第二个为绿色。系列图定义了堆积柱的颜色，但相同柱[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();
});

Answer 1

是的，我已经在这里修复了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;

Amcharts xycharts中同一列的不同颜色

1 个答案: