Highcharts 柱形图答案

【问题标题】：Highcharts Column ChartHighcharts 柱形图
【发布时间】：2011-11-01 16:07:41
【问题描述】：

我正在尝试使用 Highcharts 创建一个类似于下图所示的图表。很明显，第一列（100%）是所有其他列的总和。我想到的方法是在每个单独的类别下方都有不可见的系列，以使它们具有凸起的外观。唯一让我退缩的是想到我可能不得不处理 30 多个类别（可能在我们的应用程序中）的情况。有没有更简单的方法可以达到同样的效果？

我是新用户，无法直接发布图片。对不起。

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

【问题讨论】：

标签： charts highcharts

【解决方案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 值和低值，但这似乎可行？

【讨论】：

这似乎是个好主意。试一试，看看我能不能得到想要的结果。感谢您的快速帮助。

【解决方案2】：

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

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

See this example on jsfiddle.

【讨论】：