是否可以在单个Highcharts图表中组合两个柱形图?

时间:2013-07-07 18:39:52

标签: javascript highcharts

Highcharts支持组合不同类型的图表,例如在单个图表中将样条曲线与列组合在一起。当然,可以在同一图表中组合多个样条线。是否可以组合多个列?我可以将柱形图与第二个柱形图组合在一起,即在另一组列的顶部(通过zIndex)显示一组列吗?

这个小提琴 - http://jsfiddle.net/Bridgeland/rqrQ4/ ---显示了最简单的例子。我希望在一个高而瘦的红色矩形的顶部(zIndex)上有一个短的深黄色矩形,黄色矩形覆盖红色矩形的下半部分。相反,它们并排出现。

enter image description here

在Highcharts中我想要的是什么?

(另外,为什么Highcharts将两列的宽度减半?如果图表只有红色矩形的系列,那么它是5000宽而不是2500,如果图表只有系列黄色矩形,它是10000宽而不是5000.)

这是与小提琴相对应的代码:

$(function () {
    $('#container').highcharts({
        chart: { 
            alignTicks: false
        },
        title: {
            text: ""
        },
        yAxis: {
            min: 0,
            max: 1
        },
        xAxis: {
            min: 0,
            endOnTick: false,  
            max: 9000
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [

        {
            data: [
            1],
            type: "column",
            pointPadding: 0.01,
            groupPadding: 0,
            color: "red",
            pointInterval: 5000,
            pointRange: 5000,
            borderWidth: 0,
            shadow: false,
            pointPlacement: "between",
            zIndex: 0,
            minPointLength: 3
        }, {
            data: [
            0.5],
            type: "column",
            pointPadding: 0.01,
            groupPadding: 0,
            color: "yellow",
            pointInterval: 10000,
            pointRange: 10000,
            borderWidth: 0,
            shadow: false,
            pointPlacement: "between",
            zIndex: 1,
            minPointLength: 3
        }]
    })
})

1 个答案:

答案 0 :(得分:3)

删除groupPadding并设置:

plotOptions: {
  series: {
    grouping: false
  }
}

直播示例:http://jsfiddle.net/rqrQ4/1/