javascript - 如何在鼠标悬停时获取 highcharts 图形点的值？

Question

我正在使用以下逻辑创建一个 highcharts 图表系列:

this.series = [];

for(var i in headerData) {
    var header = headerData[i];

    this.series.push({
        name: header.name,
        data:[],
        yAxis:parseInt(header.axis),
        id: header.id,
        type: 'column',
        zIndex: 1,
        events: {
            mouseOver: function (e) {
                console.log('Point: ', e.point);
            }
        }
    });
}

我read该点是事件 e 的属性，但在我的例子中 e.point 是 undefined。我也无法在 e 中找到与鼠标悬停点相关的任何内容。

有人知道如何获取鼠标悬停的点的 x 值和 y 值吗？

Answer 1

您需要在 plotOptions 属性上设置 event。下面是一个取自 Highcharts API 文档的示例:

$(function () {
    var $reporting = $('#reporting');

    $('#container').highcharts({

        title: {
            text: 'Mouse events demo'
        },
        subtitle: {
            text: 'On point mouse over or mouse out, the values should be reported in top left'
        },
        plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function () {
                            var chart = this.series.chart;
                            if (!chart.lbl) {
                                chart.lbl = chart.renderer.label('')
                                    .attr({
                                        padding: 10,
                                        r: 10,
                                        fill: Highcharts.getOptions().colors[1]
                                    })
                                    .css({
                                        color: '#FFFFFF'
                                    })
                                    .add();
                            }
                            chart.lbl
                                .show()
                                .attr({ 
                                    text: 'x: ' + this.x + ', y: ' + this.y 
                                });
                        }
                    }
                },
                events: {
                    mouseOut: function () {
                        if (this.chart.lbl) {
                            this.chart.lbl.hide();
                        }
                    }
                }
            }
        },

        tooltip: {
            enabled: false
        },

        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]
        }]
    });
});

Demo