我正在尝试创建一个仪表板页面,如果用户单击图表中的某个点,则该点中具有该唯一标识符的所有图表都应该启用工具提示显示。这适用于除迷你图之外的所有图表。下面的现场演示显示了默认的 highcharts 迷你图演示,但我的只有一个点(带有一个点的条形图)。错误还是一样:
Uncaught TypeError: Cannot read property 'tooltipOptions' of undefined at a.Tooltip.refresh (highcharts.src.js:22676)
我用来显示/隐藏工具提示的代码是:
function chartPointClick(pointidx) {
var chartArray = Highcharts.charts;
for (var i = 0; i < chartArray.length; i++) {
var thechart = Highcharts.charts[i];
var theData = thechart.series[0].data;
if (thechart.renderTo.tagName == 'TD') {
var theSeries = thechart.series[0]
console.log(theSeries);
thechart.tooltip.refresh(theSeries.options.data[0]);
}
thechart.redraw();
}
}
这是通过plotOptions.series.events方法调用的:
events: {
click: function (event) {
chartPointClick(event.point.idx);
}
}
如何激活迷你图工具提示?
直播demo .
编辑- 直播demo使用不起作用的单个条形图。
最佳答案
工具提示refresh
方法仅接受第一个参数作为点数组:
if (thechart.renderTo.tagName == 'TD') {
var theSeries = thechart.series[0]
thechart.tooltip.refresh([theSeries.points[0]]);
}
这里的下一个问题是工具提示的 outside
选项,这会导致另一个错误。我建议您使用:
td,
th {
...
overflow: visible !important;
}
关于javascript - 如何通过代码在迷你图中显示工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54538692/