Question

我想触发当你从外部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）。

非常感谢

Answer 1

只需使用：

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

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

更新fiddle。

<强> EDITS

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

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

Highcharts - fire legendItemClick事件

2 个答案: