在Highcharts中，使特定点的工具提示始终可见且动态，我将更改其点

In Highcharts Make tooltip of a specific point always visible and dynamically i will change its point

本文关键字：动态 Highcharts 工具提示      更新时间：2023-09-26

>我创建了一个折线图，并通过此代码使工具提示在特定点可见

$('#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执行此操作

这可以

通过使用document.onkeydown方法来实现。您必须获取箭头键的按键代码：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;
    }
};

如果您需要它们来更改您正在查看的系列，我也将向上/向下代码留在那里。示例 jsFiddle。

相关文章：