Highcharts柱形图

Question

我正在尝试使用Highcharts创建一个类似于下图所示的图形。很清楚，第1列（100％）是所有其他列的总和。我想到的方法是在每个单独的类别下面都有隐形系列，以使它们具有凸显的外观。唯一阻碍我的是想到我可能需要处理30多个类别的情况（可能在我们的应用程序中）。有没有更简单的方法来实现相同的结果？

我无法直接发布图片，因为我是新用户。遗憾。

http://i.stack.imgur.com/RBWIf.png

Answer 1

我建议看看这里显示的“低”属性：

http://fiddle.jshell.net/8JP8T/

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'column'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr']
    },

    series: [{
        data: [{
            low: 1,
            y: 2
        }, {
            low: 2,
            y: 4  
        }, {
            low: 0,
            y: 4  
        }, {
            low: 4,
            y: 5  
        }]
    }]

});

您仍然需要预处理数据才能获得正确的y值和低值，但似乎可行吗？

Answer 2

对于柱形图，您可以为每个点指定y值和相应的low以创建浮动列。

series: [{
    data: [
               {y: 29.9, low: 20}, 
               {y: 50, low: 20}, 
               {y: 100, low: 50}
    ]
}]

See this example on jsfiddle