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/

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