javascript Highcharts - 使点可点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20964443/
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 - making a point clickable?
提问by user3010273
I've searched and tested several solutions but it's really hard to find an answer to this seemingly easy problem:
我已经搜索并测试了几种解决方案，但真的很难找到这个看似简单的问题的答案：
I want to make points on this chart clickable (http://jsfiddle.net/a6yL8/)
我想在这个图表上点可点击（http://jsfiddle.net/a6yL8/）
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
url: [http://test.com/, http://test2.com/]
So far, I've only managed to make the values on the x axis clickable ( by adding them as a simple html a href code )
到目前为止，我只设法使 x 轴上的值可点击（通过将它们添加为简单的 html a href 代码）
But I am unable to make the points on the chart clickable?
但我无法使图表上的点可点击？
It's an easy question but nowhere could I find an answer and the AJAX example by the highcharts creators seems to be bugged.
这是一个简单的问题，但我无处可寻，highcharts 创建者的 AJAX 示例似乎被窃听了。
Could anyone please help me?
有人可以帮我吗？
回答by Strikers
to make the points on the chart clickable set allowPointSelectas true
使图表上的点可点击设置allowPointSelect为真
plotOptions:{
series:{
allowPointSelect: true
}
}
now you handle the click event or selection event from the
现在你处理点击事件或选择事件
plotOptions:{
series:{
point:{
events:{
select: function(e){
//your logic here
}
}
}
}
}
I've updated your fiddle here http://jsfiddle.net/a6yL8/1/
我在这里更新了你的小提琴http://jsfiddle.net/a6yL8/1/
API ref link : http://api.highcharts.com/highstock#plotOptions.series.point.events
API 参考链接：http: //api.highcharts.com/highstock#plotOptions.series.point.events
I hope this will help you
我希望这能帮到您
回答by Gopal Joshi
HTML
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JQuery
查询
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: true
}
}
},
cursor: 'pointer',
point: {
events: {
click: function() {
alert('okk');
}
}
}
}
},
legend: {
type: 'area',
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
click here jsfiddle
点击这里jsfiddle
回答by vikyd
https://stackoverflow.com/a/20964524is nice.
https://stackoverflow.com/a/20964524很好。
But,
但，
By default, click on line instead of point will also trigger click event, to only allow click on points: plotOptions.series.point.events.click
默认情况下，点击线而不是点也会触发点击事件，只允许点击点：plotOptions.series.point.events.click
click: function (e) {
let $target = $(e.target)
if (!$('<b></b>').addClass($target.attr('class')).is('.highcharts-point, .highcharts-halo')) {
return
}
// do your work below ↓
}
