Javascript 海图射程线问题

我使用的是highcharts.js，我有两条范围线，我想在悬停图形点时只显示一个图形的信息

现在是这样

tooltip: {
    formatter: function() {
        var that = this;
        var min, max;
        if(this.series.options.hasOwnProperty("ranges"))
            $.each(this.series.options.ranges, function (i, point) {
                if(point[0] == that.x) {
                    min = point[1];
                    max = point[2];
                }
            });
            return "min/max range: " + min + " - " + max;
        }
    }
}

第1行：23
最小/最大范围：21-25
第2行：24
最小/最大范围：22-27

相反，我想要

第1行：23
最小/最大范围：21-25

当我悬停在line1点上时 和第2行信息，当我在上面悬停时

我可以在选项中设置工具提示：{shared:false}，但是现在它不再显示最小/最大范围

---

下面是我的图表的JSFIDLE链接

您可以将工具提示选项“共享”设置为false，或者简单地将其删除

    $('#container').highcharts({

        title: {
            text: 'July temperatures'
        },

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: false,
            valueSuffix: '°C'
        },
        // etc.
    });

---

您可以使用格式化程序为每个系列添加ID，然后自定义工具提示

例如：

格式化程序：函数（）{
var x=这个.x，
chart=this.series.chart，
relatedId=this.series.options.relatedId | | this.series.options.id，
relatedSerie=chart.get（'blackArea'），
txt=this.low===未定义？'y1:'+this.y:'低：'+this.low+'high:'+this.high；
$每个（相关系列数据、函数（i、p）{
如果（p.x==x）{
txt+=p.low===未定义？'
y:'+p.y:'低：'+p.low+'高：'+p.high；
}
});
返回txt；
},

我也找到了解决这个问题的方法

我将每个范围的数据传递给系列，如下面的示例所示

{
    name: "line 1",
    data: averages1,
    ranges: ranges1,
    zIndex: 1,
    marker: {
        fillColor: 'white',
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[0]
    }
}, {
    name: "Min/Max Range",
    data: ranges1,
    type: 'arearange',
    lineWidth: 0,
    linkedTo: ':previous',
    color: Highcharts.getOptions().colors[0],
    fillOpacity: 0.3
}

然后在格式化程序中，我访问点的范围值，如下所示

tooltip: {
    formatter: function() {
        var that = this;
        var min, max;
        if(this.series.options.hasOwnProperty("ranges"))
            $.each(this.series.options.ranges, function (i, point) {
                if(point[0] == that.x) {
                    min = point[1];
                    max = point[2];
                }
            });
            return "min/max range: " + min + " - " + max;
        }
    }
}

---

这里是JSFIDLE链接，以防禁用共享参数时，范围不会出现。