[英]Highcharts - Show tooltip onClick instead of hover
I have tried the solution at https://stackoverflow.com/a/24206104/5653279 but to no avail as my Highcharts consist of 2 series of data.我已经在https://stackoverflow.com/a/24206104/5653279尝试了解决方案,但无济于事,因为我的 Highcharts 包含 2 个系列的数据。
Following the above solution returns me the error按照上述解决方案返回给我的错误
Uncaught TypeError: Cannot read property 'category' of undefined
未捕获的类型错误:无法读取未定义的属性“类别”
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
zoomType: 'xy',
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},
tooltip: {
enabled: false,
headerFormat: '<b>{point.x: %A, %b %e at %I:%M %p}</b><br>',
shared: true,
borderRadius: 10,
crosshairs: [true, false] //x,y
},
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}
},
title: {
text: 'Glucose/Carbohydrate'
},
subtitle: {
text: 'Ratio between Glucose and Glucose'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e/%b',
},
title: {
text: 'Date'
}
},
yAxis: [{ // Glucose yAxis
labels: {
format: '{value}mmol/L',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Glucose',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Carbohydrate yAxis
title: {
text: 'Carbohydrate',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
series: [{
name: 'Glucose',
data: glucose,
marker: {
enabled: true
},
tooltip: {
valueSuffix: ' mmol/L'
}
},{
name: 'Carbohydrate',
data: carbohydrate,
dashStyle: 'shortdot',
yAxis: 1,
marker: {
enabled: true
}
}
]}
);
});
However, the error would be "solved" if I edit plotOptions as seen.但是,如果我像看到的那样编辑 plotOptions,错误将被“解决”。
plotOptions: {
series: [{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}]
},
But still, the tooltip does not show when I clicked on any point.但是,当我单击任何一点时,工具提示仍然没有显示。
Solved the issue!解决了问题!
Just changed刚换了
this.chart.myTooltip.refresh(evt.point, evt);
this.chart.myTooltip.refresh(evt.point, evt);
to到
this.chart.myTooltip.refresh([evt.point], evt);
this.chart.myTooltip.refresh([evt.point], evt);
But the only limitation to this fix is if there's multiple series (eg Line A and B) and the data of both series falls on the same X-Axis (eg on the same date), clicking on it will only show the tooltip of that particular series's data (if I click on series A's data, the tooltip only shows A's data without B, even though they are sharing the same X-Axis).但此修复的唯一限制是如果有多个系列(例如 A 线和 B 线)并且两个系列的数据落在同一 X 轴上(例如在同一日期),单击它只会显示该工具提示特定系列的数据(如果我单击系列 A 的数据,工具提示仅显示 A 的数据而没有 B,即使它们共享相同的 X 轴)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.