点击事件监听高值图

Question

我正在从一个json_encoded数组中创建我的high chart对象，该数组是从包含div的数据id传入的。

$('div.filter_pie_chart').each(function( index ) {
    $(this).highcharts($(this).data("params"));
    });

我想使用下面的符号来监听饼图的点击事件。这个是可能的吗？

$(document).on('click','.high_chart_point_object', function (event) {
       return false;
});

Answer 1

我想这个documentation link就是你需要的。

这是一个JsFiddle。

$(function () {
    // create the chart
    var mychart = $('#container').highcharts({
        chart: {
            events: {
                click: function(event) {
                    alert ('x: '+ event.xAxis[0].value +', y: '+
                          event.yAxis[0].value);
                }
            }        
        },
        xAxis: {
        },

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

我认为这些代码行也应该可以工作(未经过测试，但它与您的符号相似)：

$('.high_chart_point_object').highcharts({
  chart: {
    events: {
      click: function(event) {
        return false;
      }
    }        
  }
});

如果您想要动态更改选项，以下是解决方案：

var options = mychart.options;
options.chart.events.click = function () {alert('do what you want')};
mychart = new Highcharts.Chart(options);

这是另一个JsFiddle。

Answer 2

是的，这应该可以通过三种方式实现：

• 一个是使用plotOpttions.pie.point.events.click ant来调用你需要的函数。其中一个是在挖掘DOM元素后从Highcharts中调用Element.on()函数--这与使用$().on()相同，你确实需要$().on()，你可以使用is on point.element，为你提供示例：reference.
• if

第三种情况的代码：

    chart: {
        events: {
            load: function() {
                var chart = this,
                    pie = chart.series[0],
                    pieData = pie.data,
                    dLen = pieData.length;

                for(var i = 0; i < dLen; i++){
                    var slice = pieData[i];

                    console.log(slice, $(slice.graphic)); 
                }  
            }
        }
    }