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

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

---

谢谢

没有内置的方式

然而，你可以通过多种方式来伪装它

一种方法是为每个类别使用一个单独的序列，将grouping设置为false，将x值设为伪值，使其悬停在实际类别值周围

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

例如：

---

最后，我没有找到现成的方法来做到这一点。但我找到了一个可行的解决方案，如下所示：

将每个条形图与单个系列相关联，请参见上面提到的小提琴

在LegendItem中，单击：

手动显示或隐藏与单击的图例项关联的序列 给定每个类别的可见性，重新计算每个可见类别的索引，并使用与其关联的类别的新索引更新每个可见条形图系列数据[0].x。更新 调用xAxis.setCategories，其中包含您希望当前可见的类别列表 使用类别索引的新极值调用xAxis.setextrems 下面是一个非常简单的例子：

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;
}

---

还有一个fiddle:

你可以这样使用：我喜欢这样做，但更喜欢图例本身控制条形图的可见性，而不是单独的一组控件。你可以准备一个HTML图例或捕捉一个，然后调用我的fiddle中的操作。这只是一个简单的演示，所以你可以自己开发。塞巴斯蒂安，仅仅使用legendItemClick是不够的，因为我需要图例来显示每个条的一个项目。您建议准备一个HTML图例。对我来说，这听起来像是重新实现了整个传说。你能澄清一下吗？谢谢。我试过这种款式，效果很好。但这意味着，此后我尝试使用条形柱形图进行的所有其他操作也必须在该模式下工作，这会导致其他问题。因此，我尝试使用正常模式，并找到一种改变传奇行为的方法，希望这将是两个困难中较小的一个。是的。这远远超出了图表的一般行为，因此必然会有起伏：也许如果你澄清了这样做的目的，可能会提供其他解决方案。其目的是让用户能够以交互方式仅选择他/她感兴趣的类别。我已对您的小提琴进行了一些修改，以便更紧密地配合我想要的行为。看见但是，当单击图例项时，您和我的版本的行为都很奇怪，特别是当单击中间的项时，其中的条消失了，但其他两条条不会重新绘制以填充空白。你知道怎么解决这个问题吗？谢谢。看看塞巴斯蒂安的后续评论——legendItemClick是你所需要的，再加上他的其他设置。尝试删除轴的中间部分与设置轴的极值无关，这是隐藏第一个/最后一个数据点时发生的情况。追逐那条路线对你没有帮助。