Highcharts 标签分组

Question

我正在制作一个图表，它应该像图表一样在时间轴中显示状态。我认为最适合它的是水平条形图，我添加了这样的数据：

series: [{
    data: [?],
    name: 'state1'
}, {
    data: [?],
    name: 'state2'
}, {
    data: [?],
    name: 'state3'
}, {
    data: [?],
    name: 'state1'
}, {
    ....
}, {
    data: [?],
    name: 'state1'
}]

这是我得到的：

图表看起来像我需要的，但我需要以某种方式对图例进行分组，例如这种情况应该只有 3 个图例：state1、state2、state3。

我怎样才能实现这样的目标？

Answer 1

var legends = {};
series.forEach(function(bar){
  legends[bar.name] = bar.data;
});

Answer 2

根据@StAlex 的回答，我会推荐一个类似的解决方案，但没有特定的 ECMAScript 5 forEach:

var legend = {};
for (var i = 0; i < series.length; i++) {
    var bar = series[i];
    if (!legend[bar.name]) {
        legend[bar.name] = 0;
    }
    legend[bar.name] += bar.data;
}

我假设 data 是一个数字。如果不是这样，请添加评论。

Answer 3

我会建议使用列范围系列类型的不同方法。

这样你就可以只用三个系列来做到这一点，每个时隙都有一个数据点，而不是每个时隙都有一个系列。这样就不必操纵图例或伪造其他系列级动作。

这是example我为之前演示该方法的问题所做的（只有两种状态）：

http://jsfiddle.net/jlbriggs/o9ck2zLn/0/

也可以很容易地适应使用日期时间轴，这似乎是您想要的。

Highcharts 标签分组

Highcharts label grouping

javascript

highcharts