Question

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

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

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

Answer 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

HighCharts工具提示AJAX请求鼠标悬停事件

1 个答案: