在具有多个系列的高图上单击事件
Click events on highcharts with multiple series
当我的图表上有多个相交点的系列时,点击事件似乎根本不会触发。下面是一个例子:
http://jsfiddle.net/agnHV/22/如果你看一下四月这三个系列相交的点,它不会发出警报,但如果你检查任何不相交的点,它们就会发出警报。
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' mb';
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
plotOptions:{
column:{
point:{
events:{
click:function(){
alert('aaa');
}
}
}
}
},
series: [{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
color: '#AA4643',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
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],
tooltip: {
valueSuffix: ' °C'
},
index: 1,
zIndex: 99,
events: {
click: function(e) {
alert('boom');
console.log("CLICKY");
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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: 400px; height: 400px; margin: 0 auto"></div>
我试过添加index/zIndex来优先考虑某些点,但似乎没有帮助。
为你想出了一个很好的解决方案。因为单独的行事件不可靠,所以我为单击的图上的任何点创建了一个事件,然后使用事件信息提取系列的名称并运行检查,看看它是否是我想要的。
下面是我添加的Javascript: http://jsfiddle.net/agnHV/24/plotOptions: {
series: {
point: {
events: {
click: function(e){
var seriesName = e.point.series.name;
if(seriesName == "Temperature") {
console.log("Clicked Temperature Line");
}
else if(seriesName == "Sea-Level Pressure") {
console.log("Clicked Sea-Level Line");
}
else if(seriesName == "Rainfall") {
console.log("Clicked Rainfall Bar");
}
}
}
}
}
}
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' mb';
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
color: '#AA4643',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
color: '#89A54E',
type: 'spline',
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],
tooltip: {
valueSuffix: ' °C'
}
/*events: {
click: function(e) {
alert('boom');
console.log("CLICKY");
}
}*/
}],
plotOptions: {
series: {
point: {
events: {
click: function(e){
var seriesName = e.point.series.name;
if(seriesName == "Temperature") {
console.log("Clicked Temperature Line");
}
else if(seriesName == "Sea-Level Pressure") {
console.log("Clicked Sea-Level Line");
}
else if(seriesName == "Rainfall") {
console.log("Clicked Rainfall Bar");
}
}
}
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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: 400px; height: 400px; margin: 0 auto"></div>
相关文章:
- 高图热图:单击按钮或复选框时选择所有单元格
- D3js 饼图单击事件不起作用
- 高图表单击旋转 -90
- 和弦图 - 单击跳到键
- 高图表没有对条形图/列单击进行深入分析
- 拉斐尔圆环图单击和取消单击部分
- 高图表折线图中的单击并保持突出显示选项
- 高图表图选项单击事件仅在鼠标停留在块中时触发一次
- 高图 - 旋转饼图,将单击的部分对齐到固定点 (180°)
- 如何根据外部单击事件控制高图
- 高图点击显示更大的图形
- 单击高图列上的链接时出错
- 在Ext JS中单击图表中的条形图时,使其保持高亮
- 高图-动态更改图表类型与单选按钮点击
- 高图饼状图-在图例单击时偏移单个切片
- 剑道ui饼状图单击事件
- 高图上的条形项目单击事件
- 不能给高图中单击的不同条形图项提供不同的值
- 当图层控件移出贴图元素时,不会发出传单贴图单击事件
- 柱状图:单击事件仅触发钻取系列