Question

我有一张Highcharts柱形图，试图用一列显示某些东西的完成情况，并沿着x轴显示相邻列的下降。

     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'）并使底部透明来进行这种设置。

有没有更清洁的解决方案呢？我可以用橙色柱的方式从顶部定位吗？

由于

Answer 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
        }
    ]

请参阅更新小提琴here。

Highcharts - 从顶部定位柱形图

1 个答案: