2

我有一个 Highcharts 柱形图，试图用一列显示某件事的完成情况，以及沿 x 轴相邻列的下降情况。

这是jsfiddle：http: //jsfiddle.net/2vXqZ/

     series: [
        {
            data: [300, 150, 85, 75, 35],
            pointWidth: 60,
            dataLabels: {
                enabled: true,
                rotation: 90,
                color: 'white',
                align: 'right',
                x: -10,
                style: {
                    fontSize: '25px',
                }
            },
            stack: 'completion'
        },
        {
            data: [150, 65, 10, 40],
            color: '#ff8546',
            pointWidth: 20,
            groupPadding: -0.2,
            stack: 'drop-off'
        },
        {
            data: [150, 85, 75, 35],
            color: 'transparent',
            pointWidth: 20,
            groupPadding: -0.2,
            stack: 'drop-off',
            states: {
                hover: {
                    enabled: false
                }
            },
            dataLabels: {
                enabled: false
            }
        }
    ]

蓝色列是原始值，而每个蓝色之间的橙色列是下降（与前一列的差异）。现在，我通过堆叠两列（堆栈：'drop-off'）并使底部部分透明来进行这种设置。

有没有更清洁的解决方案？有什么办法可以让橙色列简单地从顶部定位？

谢谢

4

1 回答 1

1

您始终可以将您的投递系列设置为一种columnrange类型。

     series: [
        {
            data: [300, 150, 85, 75, 35],
            pointWidth: 60,
            dataLabels: {
                enabled: true,
                rotation: 90,
                color: 'white',
                align: 'right',
                inside: true,
                x:-10,
                style: {
                    fontSize: '25px',
                }
            }
        },
        {
            type: 'columnrange',
            data: [[0.5,150,300],[1.5,85,150],[2.5,75,85],[3.5,35,75]],
            color: '#ff8546',
            pointWidth: 20,
            groupPadding: -0.2
        }
    ]

请参阅此处的更新小提琴。

于 2013-08-03T16:33:36.407 回答