HighCharts 堆积柱形范围

标签 highcharts range stacked

我在获取 Highcharts 时遇到问题具有多个数据系列的列范围图表可按我的意愿显示。请引用http://jsfiddle.net/jbreadner/6qsvjark/1/

这里显示了两个图表,“顶部图表”和“底部图表”。

顶部图表有效地使用了多个数据系列,如代码中所示以及图例中的“任务 1”和“任务 2”条目所示。此图表的问题在于任务 1 和任务 2 条在垂直方向上相互偏移。

    series: [{
        name: 'Task 1',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 7,
            high: 8
        }, {
            x: 1,
            low: 6.5,
            high: 7.5
        }]
    }, {
        name: 'Task 2',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 8,
            high: 9
        }, {
            x: 1,
            low: 7.5,
            high: 8.5
        }]
    }]

底部图表显示了我希望看到的列范围图表,但它强制为每个数据点使用一种颜色,并且在使用一个数据系列时它破坏了图例功能。这会导致代码更丑陋,功能更少。

    series: [{
        name: 'Data',
        data: [{
            x: 0,
            low: 7,
            high: 8
        },{
            x: 0,
            low: 8,
            high: 9,
            color: "#202020"
        },{
            x: 1,
            low: 6.5,
            high: 7.5
        },{ 
            x: 1,
            low: 7.5,
            high: 8.5,
            color: "#202020"
        }]
    }]

有没有办法修改顶部图表的配置,使其保留多个数据集,但在视觉上看起来像底部图表?

柱形图具有“堆叠”属性,但这似乎不适用于图表范围类型。 “堆栈”选项包含在顶部图表中。

最佳答案

只需添加:

plotOptions: {
        columnrange: {
            grouping: false
        }
    }

到你的图表。 http://jsfiddle.net/6qsvjark/2/

关于HighCharts 堆积柱形范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26599098/

相关文章:

Python 查找给定数组的所有子数组。 (我犯了什么错误)

python - matplotlib 中的堆积面积图和日期

javascript - 动态插入数据时,highcharts 会更改系列颜色

c# - Live HighChart 不显示数据

SQL 需要从列返回范围

javascript - Highcharts 位置工具提示在堆叠条的中间

d3.js - 如何在D3中更新堆栈条形图中的数据

javascript - 在第一个元素中添加 Highcharts 标签

javascript - Highcharts 线和点仅在鼠标悬停时显示

python-3.x - PyCharm 对 `range()` 不满意