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

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

这是我的代码:

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

我试过了

 requestData(this.point) 

 requestData(this.point.id) 

但它也行不通。

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

非常感谢。

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

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

 console.log(event.point); 

来自文档:

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

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

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

我只是通过将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])}}} } }, 

要返回图表上所选点的“ID”,请使用“X”值:

 plotOptions: { series: { cursor: 'pointer', events: { click: function(event) { // Log to console console.log(event.point); alert(this.name +' clicked\n'+ 'Alt: '+ event.altKey +'\n'+ 'Control: '+ event.ctrlKey +'\n'+ 'Shift: '+ event.shiftKey +'\n'+ 'Index: '+ event.point.x); } } } }, 

在这里查看示例: http : //jsfiddle.net/engemasa/mxRwg/

我在搜索中找到了这个旧post==>当我点击Highcharts“趋势线”[在例子中:“line-time-series”]图表时[点击一个点]当我点击绘制线本身的任何地方时]。 好吧,没有向你展示太多代码,请查看

  cursor: 'pointer', point: { events: { click: function(e) { alert("X("+this.x+"),Y("+this.y+")"); }//click }//events }//point 

如果您想了解更多细节,我很乐意提供!

我有同样的问题……如果我理解正确的话。 我的解决方案是这个,以获得该系列的ID …看看它是否有帮助……

 plotOptions{ series:{ cursor: 'pointer', events: { click: function(event) { console.log(event.point.series.userOptions.id); } } } 
  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]) } } } } },