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！

现在我想使用左右键盘箭头键将工具提示的位置更改为下一个点/上一个点如何使用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;
    }
};

如果您需要更改您正在查看的系列，我也会将上/下代码留在那里。样本jsFiddle。

在Highcharts中，使特定点的工具提示始终可见并动态地改变其观点

1 个答案: