Highcharts =>单击折线图时获取点的id

Question

我正在构建折线图,当我点击该线的某个点时,我希望显示一个包含有关此点的一些数据的弹出窗口.我试图解决的问题是获取id,与此点相关的系列或类似的东西.

这是我的代码:

plotOptions: {
      column: {
        pointWidth: 20
      },

      series: {
        cursor: 'pointer',
        events: {
          click: function(event) {
            requestData(event.point);
          }
        }
      }

我试过了

requestData(this.point)

,

requestData(this.point.id)

但也没有用.

我们如何得到一个点的id？

非常感谢.

Answer 1

根据文档,event.point包含指向图上最近点的指针.

所以我写到event.point控制台,看看有什么可用.

console.log(event.point);

来自文档:

click:单击系列时触发.this关键字指的是系列对象本身.一个参数event传递给函数.这包含基于jQuery或MooTools的常见事件信息,具体取决于哪个库用作Highcharts的基础.此外,event.point包含指向图上最近点的指针.

基于文档示例的示例: http ://jsfiddle.net/5nTYd/

单击一个点,然后检查控制台.

Answer 2

我只是通过将3个对象传递到系列数据数组中,然后从点击中将其从对象的配置属性中拉出来.

所以你可以构建你的系列数据:

 series: [{
  name: 'Example',
  yAxis: 0,
  type: 'spline',
  data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]

在上面的data属性中,第一个元素是日期(x),第二个元素是另一个数据点(y),第三个元素是表示该数据对象的对象的id.这个"z"不会显示在图表上,但会显示为配置数组中的第3个元素.例如:使用plotOptions point属性捕获click,对象的ID在alert中作为this.config [2]

  plotOptions: {
    series: {
      cursor: 'pointer',
      point: {events: {click: function() {console.log(this); alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' +  this.series.name + ' ID: ' + this.config[2])}}}
     }
   },