两种图表类型合二为一?

时间:2011-10-19 06:52:46

标签: jquery highcharts

是否可以使用Highcharts生成如下图表?如果是这样,我该怎么做?

enter image description here

上图不是问题。另外我需要下面的堆叠块。蓝图就足够了。

我从已经使用Highcharts的同事那里继承了一个项目,现在我需要扩展它的功能。

1 个答案:

答案 0 :(得分:2)

是的,这是可能的。我把一个jsfiddle放在一起模拟你想要做的事情。

http://jsfiddle.net/vbpDS/4312/

所以重要的部分:

在你的系列集合中,你需要告诉它你想要一个特定的系列是列类型(如果你的默认类型设置为line - 也就是说,如果系列中没有定义类型,它将会自动绘制为默认设置为)。

chart: {
        renderTo: 'container',
        defaultSeriesType: 'line'
    },
    series: [{
        type: 'column',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        stack:'1'

    },{
        type: 'column',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        stack:'1'

    }
             , {
        data: [129.9, 271.5, 306.4, 29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4]

    },{
        data: [100, 110, 120, 130, 140, 150, 140, 130, 120, 110, 100, 110]  
    }]

现在因为您还希望列堆叠,您必须告诉它需要将哪些数据组相互堆叠。因此,您将堆栈属性设置为您想要的任何内容,但只需确保它们匹配,以便它们“绑定”在一起。

编辑:顺便说一下highcharts api文档很棒!请查看以获取更多信息:http://www.highcharts.com/ref/