使用jQuery与高级图表交互？

Question

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

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

http://jsfiddle.net/nyzj8cvp/

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

我已经讨论过使用jQuery触发器$(".e").trigger("click")，但是图例项没有ID或类来选择它们.

我该怎么做？

Answer 1

您可以使用index()和eq()来完成这一任务，但是您必须同时维护这两个序列：

 $(document).ready(function () {

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

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

  })

小提琴：

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

Answer 2

使用高级图表(特别是饼图)，您可以使用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之间。

见这些示威：

• 基于代码的JSFiddle
• 基于Pawels通知的带有ID的JSFiddle