Javascript Highchart注释单击事件不';行不通
我正在尝试在Highchart批注上添加单击事件,但它不起作用 我尝试在annotation对象上设置events属性,如下所述: 事件 鼠标,点击,点击。回调中的这个引用了注释 反对 我在这里找不到任何有关注释事件的信息: 我做错了什么Javascript Highchart注释单击事件不';行不通,javascript,highcharts,Javascript,Highcharts,我正在尝试在Highchart批注上添加单击事件,但它不起作用 我尝试在annotation对象上设置events属性,如下所述: 事件 鼠标,点击,点击。回调中的这个引用了注释 反对 我在这里找不到任何有关注释事件的信息: 我做错了什么 //从中生成的数据http://www.bikeforums.net/professional-cycling-fans/1113087-2017-tour-de-france-gpx-tcx-files.html 变量提升数据=[ [0.0, 225],
//从中生成的数据http://www.bikeforums.net/professional-cycling-fans/1113087-2017-tour-de-france-gpx-tcx-files.html
变量提升数据=[
[0.0, 225],
[0.1, 226],
[0.2, 228],
[0.3, 228],
[0.4, 229],
[0.5, 229],
[0.6, 230],
[0.7, 234],
[0.8, 235],
[0.9, 236],
[1.0, 235],
];
//现在创建图表
Highcharts.chart('容器'{
图表:{
类型:'区域',
zoomType:'x',
平移:是的,
平移键:“shift”,
可滚动绘图区:{
最小宽度:600
}
},
标题:{
文字:“2017环法自行车赛第8阶段:多尔-罗斯车站”
},
副标题:{
文本:“Highcharts中的注释图表”
},
注释:[{
标签选项:{
背景颜色:“rgba(255255,0.5)”,
垂直排列:“顶部”,
y:15
},
标签:[{
要点:{
xAxis:0,
雅克斯:0,
x:0.9,
y:235,
},
文本:“Arbois”,
}],
活动:{
单击:函数(e){alert('test');}
}
}],
xAxis:{
标签:{
格式:“{value}km”
},
最小范围:5,
标题:{
文本:“距离”
}
},
亚克斯:{
是的,
恩东蒂克:错,
最大填充:0.35,
标题:{
文本:空
},
标签:{
格式:“{value}m”
}
},
工具提示:{
HeadePerformat:'距离:{point.x:.1f}公里
',
pointFormat:“{point.y}m a.s.l.”,
分享:真的
},
图例:{
已启用:false
},
系列:[{
数据:高程数据,
lineColor:Highcharts.getOptions().Color[1],
颜色:Highcharts.getOptions().colors[2],
填充不透明度:0.5,
名称:'立面',
标记:{
已启用:false
},
阈值:空
}]
});代码>
#容器{
最大宽度:800px;
最小宽度:380px;
高度:400px;
保证金:1em自动;
}
它不受支持,但实现起来非常简单和快速。您需要在initLabel
函数上执行换行,调用继续
后,只需分配注释/标签对象中定义的事件。下面是处理单击事件的示例代码:
(function(H) {
H.wrap(H.Annotation.prototype, 'initLabel', function(proceed, shapeOptions) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var label = this.labels[this.labels.length - 1]
var annotation = label.annotation
if (label && annotation) {
label.element.onclick = label.options.events.click || annotation.options.events.click
}
})
})(Highcharts)
它指定标签对象中定义的事件,但如果未定义,则直接从所有标签的注释对象获取函数定义
此外,您还可以在此处阅读有关Highcharts.wrap()函数的更多信息:
下面是使用它的示例:
[编辑]
自v7.0以来,不再需要Wrap方法。只需删除wrap方法并保留常规注释对象中的事件定义
实例:它不受支持,但实现起来非常简单和快速。您需要在initLabel
函数上执行换行,调用继续
后,只需分配注释/标签对象中定义的事件。下面是处理单击事件的示例代码:
(function(H) {
H.wrap(H.Annotation.prototype, 'initLabel', function(proceed, shapeOptions) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var label = this.labels[this.labels.length - 1]
var annotation = label.annotation
if (label && annotation) {
label.element.onclick = label.options.events.click || annotation.options.events.click
}
})
})(Highcharts)
它指定标签对象中定义的事件,但如果未定义,则直接从所有标签的注释对象获取函数定义
此外,您还可以在此处阅读有关Highcharts.wrap()函数的更多信息:
下面是使用它的示例:
[编辑]
自v7.0以来,不再需要Wrap方法。只需删除wrap方法并保留常规注释对象中的事件定义
活生生的例子:ok my bad没有读到,thx。ok my bad没有读到,thx。感谢4不幸的是,我的highchart中的共享看起来不起作用:(你能告诉我哪里不起作用吗?也许你能给我举个例子,问题发生在哪里?谢谢4支持我会做一些其他的测试,让你知道更多。嘿@daniel_s你能更新JSFIDLE并告诉我如何获得注释点击的x和y位置吗?谢谢4不幸的是在我的high中分享图表看起来不起作用:(你能告诉我哪里不起作用吗?也许你能给我举个例子,问题发生在哪里?谢谢4支持,我会做一些其他的测试,让你知道更多。嘿@daniel\s你能更新JSFIDLE并告诉我如何获得注释点击的x和y位置吗?