如何在鼠标悬停时获取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);
            }
        }
    });
}

我读到这一点是事件的属性e,但在我的情况下e.point是undefined.我也找不到e与moused-over点相关的任何内容.

有人知道如何获得已经被碾过的点的x值和y值吗？

Answer 1

您需要设置event的plotOptions属性.以下是HighchartsAPI文档中的示例:

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

演示