为任何图表中的堆叠线组合图表中的每个堆栈提供不同的颜色

Question

我设计了一个堆叠柱形图我只是想改变每个堆叠的不同颜色我使用了来自任何图表的堆叠线组合图它使用默认颜色我必须改变每个堆叠颜色我应该怎么做即使我使用 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, 921, 1821],
  ["8", 75.1, 1671, 971, 1671],
  ["9", 80.0, 1980, 1080, 1880],
  ["10", 54.1, 1041, 1041, 1641],
  ["11", 51.3, 813, 1113, 1913],
  ["12", 59.1, 691, 1091, 1691],
  ["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, 921, 1821],
]);

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, 0, 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, 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);

Answer 1

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

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

详情查看the sample based on your snippet，注意第58、71、75行

为任何图表中的堆叠线组合图表中的每个堆栈提供不同的颜色

Give different color to each stack in stacked line combo chart in anychart

javascript

reactjs

anychart