Question

我可以创建我的Highchart：

  chart1 = new Highcharts.Chart(WhateverOptions);

当用户将光标放在一个点上时，我能够动态设置要执行的函数：

   chart1.tooltip.options.formatter = function() {
     return 'Whatever I want to display in the tooltip';
   }

我正在寻找一种方法来指定当用户点击时要执行的功能。
我需要动态指定此函数，就像工具提示一样我不想在创建图表时将事件设置为选项的一部分。

任何帮助将不胜感激谢谢。

Answer 1

我在申请中遇到了类似的情况。

实际上，我使用json构建器生成所有数据服务器端，这不允许我在我的模板中编写纯javascript。此外，我在多个页面上使用10个以上不同图形的相同模板，但我不想为所有页面分配相同的行为。

因此，我需要访问和编辑我的图表中所有点的 onclick 事件。

var chart = $('#graph-container').highcharts();
// Iterate over the chart series in order to assign a point click event option
chart.series.forEach(function(s){
  s.options.point.events = {
    click: function(){
       // Store the point object into a variable
       var $$ = this;
       // Get the corresponding date in the from my x value
       var date = new Date($$.series.points[$$.index].x);
       // Do something with the date found
       console.log(date);
    }
  }
})

这适用于Highcharts 5.x

Answer 2

Highcharts为您提供系列对象http://api.highcharts.com/highcharts#series.data.events.click的点击事件。

plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert(this.y);
                    }
                }
            }
        }
    },

要动态添加它，我只需在主图表点击事件中调用虚拟函数，它不执行任何操作，然后重新定义该函数，以便在您想要添加点击功能时执行所需操作。

Answer 3

对于个别积分，您可以使用

    $(chart.series[0].data[0]).on('click', function() {
        alert('First Point Click!');
    });

对于系列中的所有点：

    $(chart.series[0].data).on('click', function() {
        alert('Series Point Click')
    });

这是jsfiddle

动态添加事件到Highcharts系列

3 个答案: