1

我目前正在使用 Highcahrts，我需要从 AJAX 请求中检索我的数据，此数据应显示在工具提示中，并且我需要在将鼠标悬停在系列上时立即发送请求。

我想在请求结束时显示工具提示（我假设我的 req 没有​​问题）所以我当然应该使用 promise，但我不知道将哪个对象附加到 onmouseover 事件。

我尝试在 HC 文档和其他来源上寻找它，但没有找到任何东西，希望我能在这里得到一些帮助。

4

1 回答 1

1

您可以在事件中调用请求mouseOver，将数据存储在一个点中，最后调用工具提示的refresh方法。例子：

    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function() {
                        if (!this.dynamicData) {
                            fetch('https://api.npoint.io/3755b440b66a037c9499')
                                .then(data => data.json())
                                .then(data => {
                                    if (this.state === 'hover') {
                                        this.dynamicData = data;
                                        this.series.chart.tooltip.refresh(this);
                                    }
                                }).catch(function(error) {
                                    console.log('Request failed', error);
                                });
                        }
                    }
                }
            }
        }
    },

    tooltip: {
        formatter: function() {
            if (this.point.dynamicData) {
                return this.point.dynamicData.data;
            }

            return 'Loading...';
        }
    }

现场演示：http: //jsfiddle.net/BlackLabel/nt2u937m/

API参考：

https://api.highcharts.com/highcharts/tooltip.formatter

https://api.highcharts.com/highcharts/plotOptions.series.point.events.mouseOver

https://api.highcharts.com/class-reference/Highcharts.Tooltip#refresh

于 2020-08-17T09:23:26.813 回答