Javascript 在Highcharts中,使特定点的工具提示始终可见,并动态更改其点
我已经创建了一个折线图,并通过此代码使工具提示在特定点可见Javascript 在Highcharts中,使特定点的工具提示始终可见,并动态更改其点,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我已经创建了一个折线图,并通过此代码使工具提示在特定点可见 $('#container').highcharts({ chart: { events: { load: function(){ var p = this.series[0].points[0]; this.tooltip.refresh(p)
$('#container').highcharts({
chart: {
events: {
load: function(){
var p = this.series[0].points[0];
this.tooltip.refresh(p);
}
}
},
tooltip: {
backgroundColor: '#FCFFC5'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
像这样
现在,我想使用键盘上的左右箭头键将工具提示的位置更改为下一点/上一点。如何使用jquery实现这一点。您必须获得箭头键的按键代码: 37=左 39=对 然后你必须知道你已经在哪个数据点上了。我使用一个作用域变量实现了这一点,该变量包含我们试图用起始值(
p
)获取的点索引。然后,我将点选项的命名更改为ttPoint
,并将其传递给this.tooltip.refresh()代码>方法
捕获按键的代码使用onkeydown
。这是文档范围的。我得到当前图表选项和数据点的最大索引,这样我们就不会试图将工具提示位置更改为不存在的点
document.onkeydown = function (e) {
var theChart = $('#container').highcharts();
var maxP = theChart.series[0].points.length;
console.log(p);
switch (e.keyCode) {
case 37:
console.log('left');
if (p == 0) {
p = p;
} else {
p = p - 1;
}
theChart.tooltip.refresh(theChart.series[0].points[p]);
break;
case 38:
console.log('up');
break;
case 39:
console.log('right');
if (p == maxP) {
p = p;
} else {
p = p + 1;
}
theChart.tooltip.refresh(theChart.series[0].points[p]);
break;
case 40:
console.log('down');
break;
}
};
如果您需要更改您正在查看的系列,我也将向上/向下代码放在那里。示例。当我在图表中动态添加系列时,我遇到了另一个问题,因此在该点上出现了错误,因此我觉得我需要声明事件。动态加载只需告诉我应该怎么做确定我删除了该问题,该问题工作正常,但该点的标记未启用。我应该怎么做请告诉我如果您有什么想法吗?我可以将它与共享工具提示一起使用吗?因为如果我将它与共享工具提示一起使用时,它不会看到任何东西,所以请告诉我一些关于这方面的事情,谢谢advance@FirozTennali我看不出你为什么不能在共享工具提示中使用它。您是否有一个带有一些系列值的示例JSFIDLE?我明白你所说的不以图形方式更新点的意思。