【问题标题】:Is it possible to combine two column charts in a single Highcharts chart?是否可以在一个 Highcharts 图表中组合两个柱形图?
【发布时间】:2013-07-07 18:39:52
【问题描述】:

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

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

在 Highcharts 中可以实现我想要的吗?

(顺便说一句,为什么 Highcharts 将两列的宽度减半?如果图表只有红色矩形的系列,它是 5000 宽而不是 2500,如果图表只有系列黄色矩形,它是 10000 宽而不是 5000。)

下面是fiddle对应的代码:

$(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
        }]
    })
})

【问题讨论】:

    标签: javascript highcharts


    【解决方案1】:

    删除groupPadding并设置:

    plotOptions: {
      series: {
        grouping: false
      }
    }
    

    还有活生生的例子:http://jsfiddle.net/rqrQ4/1/

    【讨论】:

    • 此外,黄色条的 pointInterval 是红色条的 2 倍。
    • 是的,可能pointRange 也应该被删除并应该使用pointWidth,但我不确定。
    • 谢谢弗斯海军上将
    • 我问了另一个问题——关于黄色和红色条的大小——分别为stackoverflow.com/questions/17531557/…
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-07-12
    • 1970-01-01
    相关资源
    最近更新 更多