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

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