Javascript Highcharts => 单击折线图时获取点的 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3524774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts => Getting the id of a point when clicking on a line chart
提问by Johann
I am building a line chart and I would like, when I click on a point of the line, to display a popup containing some data about this point. The issue I try to resolve is to get the id, the series associated with this point or something like that.
我正在构建一个折线图，我希望当我点击线的一个点时，显示一个包含有关该点的一些数据的弹出窗口。我试图解决的问题是获取 id、与这一点相关的系列或类似的东西。
Here is my code :
这是我的代码：
plotOptions: {
column: {
pointWidth: 20
},
series: {
cursor: 'pointer',
events: {
click: function(event) {
requestData(event.point);
}
}
}
I tried
我试过
requestData(this.point)
,
,
requestData(this.point.id)
also but it doesn't work.
也但它不起作用。
How do we get the id of a point ?
我们如何获得一个点的 id ？
Thanks a lot.
非常感谢。
回答by user113716
According to the docs, event.point holds a pointer to the nearest point on the graph.
根据文档，event.point 持有指向图上最近点的指针。
So I'd write the event.pointto the console, and see what's available.
所以我会写到event.point控制台，看看有什么可用的。
console.log(event.point);
click: Fires when the series is clicked. The this keyword refers to the series object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. Additionally, event.point holds a pointer to the nearest point on the graph.
click：点击系列时触发。this 关键字指的是系列对象本身。一个参数，事件，被传递给函数。这包含基于 jQuery 或 MooTools 的常见事件信息，具体取决于使用哪个库作为 Highcharts 的基础。此外， event.point 保存一个指向图形上最近点的指针。
Example based on the example from the docs:http://jsfiddle.net/5nTYd/
基于文档示例的示例：http : //jsfiddle.net/5nTYd/
Click a point, and check the console.
单击一个点，然后检查控制台。
回答by user719754
I just did this by passing 3 objects into the series data array and then pulling it out of the object's config attribute from the click.
我只是通过将 3 个对象传递到系列数据数组中，然后通过单击将其从对象的 config 属性中拉出来实现的。
So you can construct your series data something like this:
所以你可以像这样构建你的系列数据：
series: [{
name: 'Example',
yAxis: 0,
type: 'spline',
data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]
In the data attribute above the 1st element is the date (x), the 2nd element is another data point (y), and the 3rd is the id of the object that represent that data object. This "z" will not show up on the graph but will show up as the 3rd element in the config array. For example: using plotOptions point attribute to capture the click, the ID of the object is in the alert as this.config[2]
在第一个元素上方的数据属性中，第一个元素是日期 (x)，第二个元素是另一个数据点 (y)，第三个元素是代表该数据对象的对象的 id。这个“z”不会显示在图表上，但会显示为配置数组中的第三个元素。例如：使用 plotOptions 点属性捕获点击，对象的 ID 在警报中为 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])}}}
}
},
回答by Scott
To return the 'ID' of the selected point on the chart use the 'X' value:
要返回图表上所选点的“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);
}
}
}
},
See an example here: http://jsfiddle.net/engemasa/mxRwg/
在此处查看示例：http: //jsfiddle.net/engemasa/mxRwg/
回答by Tilens
I had the same problem ... if I understand correctly. My solution is this, to get the id of the series ... See if it helps ...
我有同样的问题......如果我理解正确的话。我的解决方案是这样，获取系列的 id ......看看它是否有帮助......
plotOptions{
series:{
cursor: 'pointer',
events: {
click: function(event) {
console.log(event.point.series.userOptions.id);
}
}
}
回答by Sundaresan
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])
}
}
}
}
},
回答by dcparham
i found this old post in my search to ==>add a marker to a point when i click a Highcharts "Trend Line" [in examples: "line-time-series"] chart[when i click anywhere on the drawn line itself]. well, without showing you too much code, look in the
我在搜索中发现了这篇旧帖子 ==> 当我单击 Highcharts“趋势线”[在示例中：“线时间序列”] 图表时[当我单击绘制的线本身的任意位置时，将标记添加到某个点]。好吧，在不向您展示太多代码的情况下，查看
cursor: 'pointer',
point: {
events: {
click: function(e) {
alert("X("+this.x+"),Y("+this.y+")");
}//click
}//events
}//point
if you would like more detail, i'm happy to provide!
如果您想了解更多细节，我很乐意提供！
