Question

使用Highcharts显示条形图，是否有内置方法将图例项链接到类别而不是系列？因此，我会看到一个带有一堆条形图的图表，当我点击一个图例项目时，它会显示或隐藏与单个类别相关联的条形图。

由于

Answer 1

没有内置方式。

然而，你可以通过多种方式伪造它。

一种方法是为每个类别使用单独的系列，将grouping设置为false，将x值虚拟以悬停在实际类别值周围。

plotOptions: {
  series: {
    grouping: false,
    pointRange: 0.2
  }
},    
series: [{
  name: 'Group A',
  data: [[-0.25,5],[0,7],[0.25,6]]
}]

示例：

http://jsfiddle.net/jlbriggs/x1cdz54r/

Answer 2

最后，我发现没有开箱即用的方法。但我找到了一个有效的解决方案，如下所示：

将每个栏与一个系列相关联（参见上面提到的小提琴）
：
- 手动显示或隐藏与点击的图例项目相关联的系列
- 给出每个类别的可见性，重新计算每个可见类别的索引，并使用与其关联的类别的新索引更新每个可见的条形系列数据[0] .x（使用point.update（））
- 使用您希望当前可见的类别列表调用xAxis.setCategories
- 使用类别索引的新极值调用xAxis.setExtremes

以上是一个非常简单的例子：

legendItemClick = function (e) {
        var seriesClicked = e.currentTarget;
        var chart = seriesClicked.chart;
        var axis = chart.xAxis[0]

    if (seriesClicked.visible) {
        seriesClicked.hide();
        chart.series[2].data[0].update( { x: 1 });
        axis.setCategories(['Group A', 'Group C'], false)
        axis.setExtremes(0, 1, true)

    } else {
        seriesClicked.show();
        chart.series[2].data[0].update( { x: 2 });
        axis.setCategories(['Group A', 'Group B', 'Group C'], false)
        axis.setExtremes(0, 2, true)
    }
    return false;
}

小提琴：http://jsfiddle.net/dkent600/e6357a22/17/

Highcharts：如何将图例链接到类别而不是条形系列？

2 个答案: