如何为堆积柱形图中的每一列获取不同的颜色

Question

我正在尝试制作堆积百分比柱形图，但我对布局感到困惑。

下面的第一张图片显示了我试图用不同颜色为每一列实现的效果。

上面的第二张图是我设法做的图表。

Answer 1

您可以像这样分配每个单独的条形图的颜色：{y: 30, color:'green'}。这在非 3D 图形中与在 3D 图形中是一样的，只是当它是 3D 时，它会为整个条形图着色，因此您会失去顶部和侧面的区别阴影。在我看来，让它成为非 3D 看起来更好。

但无论如何，我创造了你所希望的：

使用以下代码：

    $('#container').highcharts({

        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 30,
                depth: 40
            }
        },
        xAxis: {
            categories: ['A', 'B', 'C', 'D']
        },
        yAxis: {
           labels: {
              formatter: function(){
                return 100 * this.value / $(this.axis.tickPositions).last()[0] + '%';
              }
           }
        },
        legend:{
            enabled:false
        },
        plotOptions: {
            column: {
                stacking: 'percent',
                depth:30,
                dataLabels: {
                    enabled: true,
                    color: 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },

        series: [{
           index: 1,
           data: [
                 {y: 30, color:'green'},
                 {y: 20, color: 'blue'},
                 {y: 18, color: 'red'}, 
                 {y: 17, color: 'black'}
              ]
           }, {
             index: 2,
             data: [
                {y: 70, color:'lightgreen'},
                {y: 80, color: 'lightblue'},
                {y: 82, color: 'pink'}, 
                {y: 83, color: 'lightgray'}
             ]
         }]
    });
});

JSFiddle

如何为堆积柱形图中的每一列获取不同的颜色

How to get different colors for every column in a stacked column chart

javascript

highcharts

data-visualization

highstock