Question

我想创建一个HTML菜单，让用户在点击菜单选项时显示/隐藏饼图的各个部分。

在这里，您可以看到我想要使用的图表示例：

我想让用户点击菜单选项，然后点击图例项目执行相同的操作。

我已尝试使用jQuery触发器$(".e").trigger("click")，但图例项目没有ID或类来选择它们......

我该怎么办？

Answer 1

您可以使用index()和eq()来执行此操作，但您必须在两者中维护序列：

 $(document).ready(function () {

        $(".menu li").click(function(){

            $(".highcharts-legend-item").eq($(this).index()).trigger("click");

  })

FIDDLE：

http://jsfiddle.net/nyzj8cvp/1/

Answer 2

使用Highcharts，特别是饼图，可以使用point.setVisible(boolean)执行此操作。这是因为饼图的每个图例项都是单个点（不是系列）。例如：

$('.firefox').click(function() {
    var point = $('#container').highcharts().series[0].points[0];
    point.setVisible(!point.visible);
});

$('.ie').click(function() {
    var point = $('#container').highcharts().series[0].points[1];
    point.setVisible(!point.visible);
});

点击其中一个菜单项（.firefox或.ie）时，我们首先会找到相关点（您可以组织这些点以便于访问）。然后我们在setVisible和true之间切换false。

参见这些演示：

使用jQuery与highcharts交互？

2 个答案:

FIDDLE：