Highcharts 标签分组答案

【问题标题】：Highcharts label groupingHighcharts 标签分组
【发布时间】：2015-02-06 07:38:57
【问题描述】：

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

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

这是我得到的：

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

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

【问题讨论】：

使用linkedTo的this approach怎么样？

标签： javascript highcharts

【解决方案1】：

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

通过这种方式，您可以只使用三个系列，每个时隙都有一个数据点，而不是每个时隙都有一个系列。这样就不必操纵图例或伪造其他系列级别的动作。

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

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

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

【讨论】：

【解决方案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 是一个数字。如果不是这样，请添加评论。

【讨论】：

【解决方案3】：

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

【讨论】：