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

Question

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

$('#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]
            }]
        });

像这样a link!

现在我想使用键盘左右箭头键将工具提示的位置更改为下一个 point/previous 点如何使用 jquery

Answer 1

这可以通过使用 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;
    }
};

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

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

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

javascript

jquery

highcharts