Highchart tooltip show nearest point

前端 未结 4 1306
温柔的废话
温柔的废话 2021-01-22 06:48

I have been trying to make highchart tooltip to show the nearest point incase the x-axis value aren\'t align in different series.

This is what I got so far

http

4条回答
  •  感情败类
    2021-01-22 07:24

    for constant order the tooltips

    Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) {
                var args = arguments,
                        points = args[1],
                        point = points[0],
                        chart = point.series.chart;
    
                // Loop over all the series of the chart
                Highcharts.each(chart.series, function (series) {
                    // This one already exist
                    if (series == point.series || series.visible == false)
                        return;
    
                    var current,
                            dist,
                            distance = Number.MAX_VALUE;
                    // Loop over all the points
                    Highcharts.each(series.points, function (p) {
                        // use the distance in X to determine the closest point
                        dist = Math.abs(p.x - point.x);
                        if (dist < distance) {
                            distance = dist;
                            current = p;
                            return;
                        }
                    });
    
                    // Add the closest point to the array
                    if (points.indexOf(current) == -1)
                        points.push(current);
                });
                // for not changing the tooltip series order
                var tt = [].slice.call(args, 1);
                tt[0].sort(function (a, b) {
                    if (a.color < b.color)
                        return -1;
                    if (a.color > b.color)
                        return 1;
                    return 0;
                });
    
                proceed.apply(this, tt);
    
            });
    

自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题