javascript - 是否可以将两个柱形图合并到一个 Highcharts 图表中?

标签 javascript highcharts

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

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

enter image description here

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

(顺便说一句,为什么 Highcharts 将两列的宽度减半?如果图表只有红色矩形的系列,则宽度为 5000 而不是 2500,如果图表只有红色矩形的系列,则宽度为 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
        }]
    })
})

最佳答案

删除groupPadding并设置:

plotOptions: {
  series: {
    grouping: false
  }
}

以及实例:http://jsfiddle.net/rqrQ4/1/

关于javascript - 是否可以将两个柱形图合并到一个 Highcharts 图表中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17515103/

相关文章:

javascript - dojo 可以在没有 iFrame 的情况下浏览 dijit.Dialog 中的页面吗?

javascript - 沿四边形的周边对点进行排序

highcharts - 如何使用 Angular 5 的 Highcharts ?

javascript - 在 Highcharts 'stacked & grouped column' 布局中显示整个组的总计

javascript - AngularJS 对自定义指令的单向绑定(bind)

javascript - Highcharts 仅在彩色区域检测 mouseOver 事件

javascript - 通过 FireFox 在 html 中打印带有图表的表格

javascript - 如何更新数组中的对象详细信息?

javascript - Jquery 数据绑定(bind)到无序列表

javascript - 使用 Javascript/jQuery 出现奇怪的错误