我正在构建折线图,当我点击该线的某个点时,我希望显示一个包含有关此点的一些数据的弹出窗口。 我试图解决的问题是获取id,与此点相关的系列或类似的东西。
这是我的代码:
plotOptions: {
column: {
pointWidth: 20
},
series: {
cursor: 'pointer',
events: {
click: function(event) {
requestData(event.point);
}
}
}
我试过
requestData(this.point)
,
requestData(this.point.id)
但也不起作用。
我们如何得到一个点的id?
非常感谢。
答案 0 :(得分:16)
根据文档, event.point包含指向图上最近点的指针。
所以我将event.point
写入控制台,看看有什么可用。
console.log(event.point);
click:单击系列时触发。 this关键字引用系列对象本身。一个参数event传递给函数。这包含基于jQuery或MooTools的常见事件信息,具体取决于哪个库用作Highcharts的基础。此外,event.point包含指向图上最近点的指针。
基于文档示例的示例: http://jsfiddle.net/5nTYd/
单击一个点,然后检查控制台。
答案 1 :(得分:11)
我刚刚将3个对象传递到系列数据数组中,然后从点击中将其拉出对象的配置属性。
所以你可以构建你的系列数据:
series: [{
name: 'Example',
yAxis: 0,
type: 'spline',
data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]
在上面的数据属性中,第一个元素是日期(x),第二个元素是另一个数据点(y),第三个元素是表示该数据对象的对象的id。这个“z”不会显示在图表上,但会显示为配置数组中的第3个元素。例如:使用plotOptions point属性捕获单击,对象的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])}}}
}
},
答案 2 :(得分:3)
要返回图表上所选点的“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/
答案 3 :(得分:0)
我在我的搜索中找到了这个旧帖子==>当我点击Highcharts“趋势线”[在示例中:“line-time-series”]图表时[我点击任何地方时添加标记到一个点]画线本身]。好吧,没有向您展示太多代码,请查看
cursor: 'pointer',
point: {
events: {
click: function(e) {
alert("X("+this.x+"),Y("+this.y+")");
}//click
}//events
}//point
如果您想了解更多细节,我很乐意提供!
答案 4 :(得分:0)
我有同样的问题......如果我理解正确的话。 我的解决方案是这个,以获得该系列的ID ... 看看它是否有帮助......
plotOptions{
series:{
cursor: 'pointer',
events: {
click: function(event) {
console.log(event.point.series.userOptions.id);
}
}
}
答案 5 :(得分:0)
|---------------------------|
| Alias |
|-------------|-------------|
| person_id_1 | person_id_2 |
|-------------|-------------|
| 1 | 2 |
|-------------|-------------|