HighCharts堆叠柱形范围图

Question

我有一个问题，希望能得到解决。我想使用Highcharts Column Range 图表来显示多个数据系列，但我无法如愿以偿。请参考http://jsfiddle.net/jbreadner/6qsvjark/1/。

这里展示了两个图表，分别是“顶部图表”和“底部图表”。

顶部图表有效地使用了多个数据系列，正如您在代码中看到的那样，并且还可以在图例中看到“Task 1”和“Task 2”的条目。这个图表的问题在于Task 1和Task 2的柱子在垂直方向上相互偏移。

    series: [{
        name: 'Task 1',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 7,
            high: 8
        }, {
            x: 1,
            low: 6.5,
            high: 7.5
        }]
    }, {
        name: 'Task 2',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 8,
            high: 9
        }, {
            x: 1,
            low: 7.5,
            high: 8.5
        }]
    }]

底部的图表显示了我想要看到的列范围图，但它强制为每个数据点设置颜色，并且在使用一个数据系列时，它会破坏图例功能。这导致代码更加丑陋，功能也减少了。

    series: [{
        name: 'Data',
        data: [{
            x: 0,
            low: 7,
            high: 8
        },{
            x: 0,
            low: 8,
            high: 9,
            color: "#202020"
        },{
            x: 1,
            low: 6.5,
            high: 7.5
        },{ 
            x: 1,
            low: 7.5,
            high: 8.5,
            color: "#202020"
        }]
    }]

有没有办法修改顶部图表的配置，使其保留多个数据集，但视觉上看起来像底部图表？

列图具有“堆叠”属性，但似乎无法与图表范围类型配合使用。 “堆叠”选项包含在顶部图表中。

- Jeff Breadner

---

很抱歉告诉你，它们并没有真的卡住。假设我们有两列，C1（x，low1，high1）和C2（x，low2，high2），如果（low2 < low1 and high2 > high1），那么你会看到C2完全覆盖了C1.. 卡住的原则是将C2完全放在C1之上，但这里并非如此。 - user8005270

Answer 1

只需要添加：

plotOptions: {
        columnrange: {
            grouping: false
        }
    }

将此代码添加到您的图表中。 http://jsfiddle.net/6qsvjark/2/

- Raein Hashemi

---

前段时间我也试图做同样的事情。最终在D3.js中实现了它。我不知道是我太蠢还是Highcharts不够清晰。 - art-solopov