Question

我对Highcharts非常陌生，我正在尝试同步https://www.highcharts.com/blog/snippets/synchronisation-of-multiple-charts/中所示的highcharts，但是我在下面的部分遇到了问题。

在链接中，第一部分在下面。

$('#container').bind('mousemove touchmove touchstart', function (e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
        point = chart.series[0].searchPoint(event, true); // Get the hovered point

        if (point) {
            point.highlight(e);
        }
    }
});

仅供参考，我在应用程序中使用Vue.js。我能够看到根据console.log（'fired'）语句触发了'mousemove touchmove touchstart'事件，但以下行始终失败。

point.highlight(e);

错误是：

Uncaught TypeError: _point.highlight is not a function

这是我的Vue.js代码：

$(`#vue-multi-charts-${self._uid}`).bind('mousemove touchmove touchstart', function (e) {

    console.log('fired');  // THIS PART WORKS

    let point,
        chartRefs = Object.keys(self.$refs).filter((k) => k.startsWith('highchartComponent-'));

    for (let i = 0; i < chartRefs.length; i++) {
        let chart = self.$refs[chartRefs[i]][0].chart,
            event = chart.pointer.normalize(e.originalEvent), // Find coordinates within the chart
            point = chart.series[0].searchPoint(event, true); // Get the hovered point

        if (point) {
            point.highlight(e);
        }
    }

});

我使用了Highcharts API，但是找不到“ highlight”方法的文档。例如https://api.highcharts.com/class-reference/Highcharts.Point没有突出显示方法。

如果有人可以提供帮助，我将非常感谢。

非常感谢您。

Answer 1

请注意，在above script中，作者将highlight定义为自定义方法：

Highcharts.Point.prototype.highlight = function (event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};

Highcharts同步不起作用：point.highlight

1 个答案: