10

我想触发与您选择项目图例但从外部 html 按钮触发的事件相同的事件。可能吗？

我创建了一个 jsfiddle 来展示它：http: //jsfiddle.net/YcJF8/1/ 。

$('#container').highcharts({
                    chart : {
                        type : 'spline',
                    },

                    xAxis : {
                        categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },

                    series : [{
                        data : [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

                    }],

                    plotOptions : {
                        series : {

                        cursor : 'pointer',
                    }
                },
});

$('#button').click(function() {
        alert("Fire legenditemclick event");
});

在这个 jsfiddle 中，我有一个按钮，我希望当我单击该按钮时，它会触发一个事件或图表检测到的事件，并且其行为类似于单击了项目图例（系列 1）。

非常感谢

4

2 回答 2

9

只需使用：

$($('.highcharts-legend-item')[0]).click()

其中0是您希望“点击”的系列的索引。

更新小提琴。

编辑

  • highcharts-legend-item是图例中每个条目的类。我通过使用 chrome 开发工具检查图例发现了这一点。
  • 这$('.highcharts-legend-item')是一个 jquery 选择器，用于返回该类的所有元素的数组。我通过索引选择第一个$()并将其转换为 jquery 对象
  • .click就是这样：http : //api.jquery.com/click/
于 2013-07-03T14:01:04.983 回答
2

我认为定义点击的答案

$('.highcharts-legend-item')[0])

不是最好的。它非常“昂贵”，因为 DOM 可能很重。我的解决方案通常基于 CSS。您可以在要使用的自定义元素上方设置高图图例项目的位置，并且每个项目的宽度和高度应与自定义 HTML 元素相同。Highchart 元素的不透明度值应为 0，因此它们不可见。因此，当您单击元素时，实际上，您正在单击高图图例项。如果你想为你的自定义元素设置一些 CSS，你应该定义 legendItemClick 回调：

plotOptions: {
    series: {
        events: {
            legendItemClick: function() {
                var legenedItemIndex = this.index // index of highchart legend item
                $("your html element:eq(" + legenedItemIndex + ")") //do something with your element
            }
        }
    }
}
于 2015-04-02T10:03:18.037 回答