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

Posted 2023-02-16

【中文标题】Highcharts：如何将图例链接到类别而不是条形系列？

【英文标题】：Highcharts: How to link legend to categories rather than to bar series?

【发布时间】：2015-11-27 04:26:43

【问题描述】：

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

谢谢

【问题讨论】：

你可以这样使用：jsfiddle.net/whFvA/4

我喜欢这里的发展方向，但更希望图例本身控制条形的可见性，而不是一组单独的控件。

您可以准备 html 图例或捕获 legendItemClick event，然后调用我的小提琴中的操作。这只是一个简单的demo，大家可以自行开发。

塞巴斯蒂安，仅使用 legendItemClick 是不够的，因为我需要图例在每个栏显示一个项目。您建议“准备一个 HTML 图例”。在我看来，这听起来像是重新实现了整个传奇。你能澄清一下吗？谢谢。

【参考方案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/

【讨论】：

我已经尝试过类似这种模式的东西，并且它有效。但这意味着我之后尝试对条形（柱形）图执行的所有其他操作也必须在该模式下工作，这会导致其他问题。因此，我正在尝试使用正常模式并找到改变图例行为的方法，希望这将是两个困难中较小的一个。

是的。这与图表的普通行为相去甚远，因此肯定会很坎坷:) 也许如果您明确这样做的目的，可能会提出替代解决方案。

这个想法是让用户能够以交互方式选择他/她有兴趣看到的类别。

我已经稍微修改了你的小提琴，以便更紧密地处理我想要的行为。见jsfiddle.net/dkent600/e6357a22/1。但是，在单击图例项时，您和我的版本都表现得很奇怪，特别是在单击中间项时，该条消失了，但其他两个条不会重绘以填充空白区域。知道如何解决这个问题吗？谢谢。

查看 sebastian 的后续评论 - legendItemClick 是您所需要的，与他的其余设置相结合。尝试删除轴的中间与设置轴的极端无关，这就是隐藏第一个/最后一个数据点时发生的情况。追逐那条路线对你没有帮助。

【参考方案2】：

最后，我没有找到开箱即用的方法来做到这一点。但我找到了一个可行的解决方案，如下：

将每个条与单个系列相关联（参见上面提到的小提琴）

在 legendItemClick 中：

手动显示或隐藏与单击的图例项关联的系列 给定每个类别的可见性，重新计算每个可见类别的索引，并使用与其关联的类别的新索引更新每个可见条形系列 data[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/