javascript - 在 Highcharts 的堆叠条中为每个堆叠赋予不同的颜色

Question

如问题所述，我想为堆叠条形图中的每个堆叠赋予不同的颜色。

我试过:

• 在pie选项中设置colorByPoint=true，为每个条设置不同的颜色。

• 为 series 中的每个 JSON 设置 color，但未按预期工作。

但如图所示，我希望每个堆栈都使用不同的颜色。

Answer 1

您可以为整个系列点设置颜色，也可以只为一个点设置颜色。没有别的出路，所以为了达到图像上显示的效果，您需要在系列内的每个点上设置不同的颜色，然后在下一个系列定义中使这种颜色更亮一些。

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears']
    },
    plotOptions: {
        series: {
        stacking: 'normal'
      }
    },
    legend: false,
    series: [{
        name: 'Jane',
        data: [{
            y: 2,
          color: '#ff0000' // red
        }, {
            y: 3,
          color: '#00ff00' // green
        }, {
            y: 1,
          color: '#0000ff' // blue
        }]
    }, {
        name: 'Joe',
        data: [{
            y: 1,
          color: '#990000' // medium red
        }, {
            y: 2,
          color: '#009900' // medium green
        }, {
            y: 3,
          color: '#000099' // medium blue
        }]
    }, {
        name: 'John',
        data: [{
            y: 3,
          color: '#550000' // dark red
        }, {
            y: 1,
          color: '#005500' // dark green
        }, {
            y: 2,
          color: '#000055' // dark blue
        }]
    }]
});

实例:https://jsfiddle.net/vyamk5cg/