Question

我正在尝试使用堆叠百分比柱形图，但是我坚持使用布局。

下面的第一张图片显示了我想要为每一列用不同颜色实现的目标。

上面的第二张图显示了我设法做的图表。

Answer 1

您可以像这样分配每个单独栏的颜色：{y: 30, color:'green'}。这在非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

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

1 个答案: