在任意图表中为堆叠线组合图中的每个堆叠赋予不同的颜色

如何解决在任意图表中为堆叠线组合图中的每个堆叠赋予不同的颜色

我已经设计了一个堆积柱状图，我只是想更改每个堆积的不同颜色，我已经从任何图表中使用了堆积线组合图，它使用默认颜色，我必须更改每个堆积的颜色，我应该如何更改颜色甚至我都使用color（）。[！[在此处输入图片描述] [1]] [1]填充它无法正常工作。

let dataSet = anychart.data.set([
  ["1",96.5,2040,1200,1600],["2",77.1,1794,1124,1724],["3",73.2,2026,1006,1806],["4",61.1,2341,921,1621],["5",70.0,1800,1500,1700],["6",60.7,1507,1007,1907],["7",62.1,2701,1821],["8",75.1,1671,971,1671],["9",80.0,1980,1080,1880],["10",54.1,1041,1641],["11",51.3,813,1113,1913],["12",59.1,691,1091,1691],["1",]);

let firstSeriesData = dataSet.mapAs({ x: 0,value: 1 });

let secondSeriesData = dataSet.mapAs({ x: 0,value: 2 });

let thirdSeriesData = dataSet.mapAs({ x: 0,value: 3 });

let fourthSeriesData = dataSet.mapAs({ x: 0,value: 4 });

let chart = anychart.column();

chart.animation(true);

chart.title("Combination of Stacked Column and Line Chart (Dual Y-Axis)");

let setupSeriesLabels = function (series,name) {
  series.name(name).stroke("3 #fff 1");
  series.hovered().stroke("3 #fff 1");
};
var series;

chart.yScale().stackMode("value");
chart.yScale().stackDirection("direct");

let scale = anychart.scales.linear();
scale.minimum(0).maximum(100).ticks({ interval: 5 });

let extraYAxis = chart.yAxis(1);
extraYAxis.orientation("right").scale(scale);
extraYAxis.labels().padding(0,5);

extraYAxis.labels().format("{%Value}");

series = chart.column(secondSeriesData);
setupSeriesLabels(series,"To-Do");

chart.crosshair(true);

let lineSeries = chart.line(
  firstSeriesData,setupSeriesLabels(series,"Remaining Task"),"#3ba158"
);
lineSeries.yScale(scale).markers(true);

series = chart.column(thirdSeriesData);
setupSeriesLabels(series,"Requirements Complete");

series = chart.column(fourthSeriesData);
setupSeriesLabels(series,"Estimated Minutes");

chart.legend().enabled(true).fontSize(13).padding([0,20,0]);

chart.yAxis().labels().format("{%index}{groupsSeparator: \\,}");

chart.xAxis(0).title("Sprint Days");

chart.yAxis().title("Number of Tasks");
chart.yAxis(1).title("Total Hours");

chart.interactivity().hoverMode("by-x");

chart.tooltip().valuePrefix("$").displayMode("union");

chart.xGrid().enabled(true);
chart.yGrid().enabled(true);

chart.xMinorGrid().enabled(true);
chart.yMinorGrid().enabled(true);

解决方法

您可以使用系列实例的fill()方法来实现。像这样：

  var series = chart.column(secondSeriesData);
  series.fill('purple');

有关详细信息，请检查the sample based on your snippet并注意第58、71和75行。