【问题标题】:HighCharts stacked column rangeHighCharts 堆积列范围
【发布时间】:2014-10-28 00:34:39
【问题描述】:

我在获取包含多个数据系列的 Highcharts 列范围图表时遇到问题,可以按我的意愿显示。请参考http://jsfiddle.net/jbreadner/6qsvjark/1/

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

上面的图表有效地使用了多个数据系列,这在代码中以及图例中的“任务 1”和“任务 2”条目中都可以看到。此图表的问题在于 Task 1 和 Task 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"
        }]
    }]

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

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

【问题讨论】:

  • 很抱歉告诉你,但他们并没有真正陷入困境。假设我们有两列,C1(x, low1, high1) 和 C2(x, low2, high2) if (low2 high1 ) 你会看到 C2 完全隐藏 C1 .. Stucking 的原理是将 C2 完全放在 C1 之上,这不是这里的情况..

标签: highcharts range stacked


【解决方案1】:

只需添加:

plotOptions: {
        columnrange: {
            grouping: false
        }
    }

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

【讨论】:

  • 前段时间我试图这样做。最终在 D3.js 中实现它。不知道是我傻还是Highcharts不太清楚。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-10
  • 1970-01-01
相关资源
最近更新 更多