Highcharts-在单击而不是悬停时显示工具提示
Highcharts - Show tooltip onClick instead of hover
我在https://stackoverflow.com/a/24206104/5653279但没有用,因为我的Highcharts由两个系列的数据组成。
按照上述解决方案返回错误
未捕获的类型错误:无法读取未定义的属性"category"
$(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
}
}
]}
);
});
但是,如果编辑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();
}
}
}]
},
但是,当我单击任何点时,工具提示都不会显示。
解决了问题
刚刚更改
this.chart.myTooltip.refresh(evt.point,evt);
至
this.chart.myTooltip.refresh([evt.point],evt);
但该修复程序的唯一限制是,如果有多个系列(例如,A线和B线),并且两个系列的数据都位于同一X轴上(例如,在同一日期),则单击它将只显示该特定系列数据的工具提示(如果我单击系列A的数据,则工具提示只显示A的数据而不显示B,即使它们共享相同的X轴)。
相关文章:
- 将href链接添加到通过js鼠标悬停显示的图像
- 鼠标悬停显示 Lightbox2 和 Milkbox 照片的 HTML
- 使用鼠标悬停显示图像,图像位于 li-tag 之外
- 悬停显示下一个“ul”的“李”
- 拉斐尔JS - 悬停 - 显示/隐藏单独的 DIV
- Javascript/CSS/HTML 鼠标悬停显示没有可点击链接的远程页面
- Javascript 仅在 iPad 上悬停显示菜单
- 更正菜单悬停显示
- 在jquery中使用悬停显示和隐藏文本
- jQuery悬停显示和隐藏我的内容
- JQuery在图像悬停显示标题标签内容,可能的
- 如何设置此鼠标悬停显示,即使鼠标悬停超过3秒
- 在图像悬停显示列表项
- Jquery悬停显示和隐藏可见性问题
- 鼠标悬停显示添加购物车按钮和折扣图像
- 在缩略图's悬停显示更大的图像
- 如何改变z数据悬停显示百分比以及百分比的颜色
- 如何设置鼠标悬停显示延迟
- jQuery悬停显示多个元素
- 任何Jquery库显示图像和悬停显示描述