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

问题描述

我已经设计了一个堆积柱状图，我只是想更改每个堆积的不同颜色，我已经从任何图表中使用了堆积线组合图，它使用默认颜色，我必须更改每个堆积的颜色，我应该如何更改颜色甚至我都使用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行。

anychart javascript reactjs reactjs