Javascript 工具提示没有';在highchart xrange中重叠数据点出现t

Javascript 工具提示没有';在highchart xrange中重叠数据点出现t,javascript,css,highcharts,Javascript,Css,Highcharts,我有一个xrange highchart,其中有一个系列,其中一些数据点具有重叠值。当鼠标指针在特定数据点上时,我需要一次获取重叠数据点的值。 我尝试使用seriesmouseover事件,但从中只能得到一个重叠的数据点。下面是我的代码 Highcharts.chart('container'{ 图表:{ 类型:“xrange”, 身高:100, marginLeft:12, marginRight:12, 背景颜色:“透明” }, 打印选项:{ 系列:{ 要点:{ 活动:{ 鼠标悬停:(ev

我有一个
xrange highchart
,其中有一个系列,其中一些数据点具有重叠值。当鼠标指针在特定数据点上时,我需要一次获取重叠数据点的值。 我尝试使用series
mouseover
事件,但从中只能得到一个重叠的数据点。下面是我的代码

Highcharts.chart('container'{
图表:{
类型:“xrange”,
身高:100,
marginLeft:12,
marginRight:12,
背景颜色:“透明”
},
打印选项:{
系列:{
要点:{
活动:{
鼠标悬停:(ev)=>{
控制台日志(ev);
}
}
}
}
},
学分:{
已启用:false
},
标题:{
文本:“”
},
工具提示:{
分享:真的
},
xAxis:{
可见:对,
长度:0,
线宽:2,
线条颜色:“#eee”,
标签:{
已启用:false
},
最大值:UTC日期(2019年6月13日)
},
亚克斯:{
可见:假
},
图例:{
已启用:false
},
系列:[{
名称:“”,
边界半径:0,
点填充:0,
边框宽度:4,
分组填充:0,
数据:[{
x:UTC日期(2019年3月21日),
x2:UTC日期(2019年6月2日),
y:0,
颜色:'透明',
边框颜色:“rgba(230、141、11、0.5)”
}, {
x:UTC日期(2019年5月26日),
x2:UTC日期(2019年6月5日),
y:0,
颜色:'透明',
边框颜色:“rgba(228,53,70,0.5)”
}, {
x:UTC日期(2019年5月8日),
x2:UTC日期(2019年11月10日),
y:0,
颜色:'透明',
边框颜色:“rgba(40167690.5)”
}
],
数据标签:{
已启用:false
}
}]
});

您可以启用
跟随指针
选项,并在
定位器
功能中将光标坐标与点坐标进行比较,以在工具提示标签中显示所需的值:

tooltip: {
    followPointer: true,
    positioner: function(plotX, plotY, pos) {
        var points = this.chart.series[0].points,
            str = '';

        points.forEach(function(p) {
            if (
                p.shapeArgs.x <= pos.plotX &&
                p.shapeArgs.x + p.shapeArgs.width >= pos.plotX
            ) {
                str += '<span style="color:' + p.borderColor +
                    '">' + p.x + ' - ' + p.x2 + '</span><br>';
            }
        });

        this.label.attr({
            text: str
        });

        return this.getPosition(plotX, plotY, pos)
    }
}
工具提示:{
followPointer:true,
定位器:功能(plotX、plotY、pos){
var points=this.chart.series[0]。点,
str='';
点。forEach(函数(p){
如果(
p、 shapeArgs.x=位置图x
) {
str+=''+p.x+'-'+p.x2+'
'; } }); this.label.attr({ 文本:str }); 返回此.getPosition(plotX、plotY、pos) } }
现场演示:

API参考:


您可以启用
跟随指针
选项,并在
定位器
功能中将光标坐标与点坐标进行比较,以在工具提示标签中显示所需的值:

tooltip: {
    followPointer: true,
    positioner: function(plotX, plotY, pos) {
        var points = this.chart.series[0].points,
            str = '';

        points.forEach(function(p) {
            if (
                p.shapeArgs.x <= pos.plotX &&
                p.shapeArgs.x + p.shapeArgs.width >= pos.plotX
            ) {
                str += '<span style="color:' + p.borderColor +
                    '">' + p.x + ' - ' + p.x2 + '</span><br>';
            }
        });

        this.label.attr({
            text: str
        });

        return this.getPosition(plotX, plotY, pos)
    }
}
工具提示:{
followPointer:true,
定位器:功能(plotX、plotY、pos){
var points=this.chart.series[0]。点,
str='';
点。forEach(函数(p){
如果(
p、 shapeArgs.x=位置图x
) {
str+=''+p.x+'-'+p.x2+'
'; } }); this.label.attr({ 文本:str }); 返回此.getPosition(plotX、plotY、pos) } }
现场演示:

API参考:


这就是我需要的。谢谢这就是我需要的。谢谢