如何将图表中的所有项目设置为在图表4中具有相同的颜色

问题描述

我有一个条形图,我想知道是否有一种方法可以使所有图形具有相同的颜色:

https://codepen.io/conormdowney/pen/xmVRjd

var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.data = [{
  "category": "Research","value1": 450,"value2": 1200,"value3": 960,"value4": 710,"value5": 900
},{
  "category": "Marketing","value1": 1200,"value2": 450,"value3": 850,"value4": 1250,"value5": 950
},{
  "category": "distribution","value1": 1850,"value2": 1700,"value3": 450,"value4": 870,"value5": 600
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.datafields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
//categoryAxis.renderer.minGriddistance = 30;

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

// Create series
function createSeries(field) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.datafields.valueY = field;
  series.datafields.categoryX = "category";
  return series;
}

createSeries("value1");
createSeries("value2");
createSeries("value3");
createSeries("value4");
createSeries("value5");```

解决方法

有两种方法:

  1. 显而易见的方法是手动将每个系列的颜色设置为相同。如果愿意,您也可以从图表的颜色列表中拉出
  series.columns.template.fill = chart.colors.getIndex(0);
  series.columns.template.stroke = chart.colors.getIndex(0);
  1. 或者,您可以在图表的colors对象上将reuse设置为true,以使其仅重用列表中的颜色。将列表设置为单一颜色基本上与第一种方法中的行相同:
chart.colors.reuse = true;
chart.colors.list = [
  am4core.color("#845EC2")
];
,

@xorsparks回答,但我的条形是我的一种颜色的变体。我发现我必须设置chart.colors.passOptions = {};才能阻止这种情况的发生。