Chart.js ChartJs-悬停时顶部和底部的双重工具提示

我试图在折线图的某个点上悬停时呈现双重工具提示。像这样：

我在网上什么也没找到。

---

有人知道如何实现它？

可以扩展Chart.js的功能（请参阅），在将鼠标悬停在某个点上时绘制垂直线和第二个工具提示：

Chart.defaults.MyLine=Chart.defaults.line；
Chart.controllers.MyLine=Chart.controllers.line.extend({
绘图：功能（轻松）{
图表.控制器.线条.原型.绘图.调用（此，ease）；
if（this.chart.tooltip.\u活动（&this.chart.tooltip.\u活动.length））{
var activePoint=this.chart.tooltip.\u active[0]，
ctx=this.chart.ctx，
x=activePoint.tooltipPosition（）.x，
topY=此。图表。比例['y轴-0']。顶部，
bottomY=这个.图表.刻度['y轴-0'].底部；
//划线
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（x，topY）；
ctx.lineTo（x，底部）；
ctx.lineWidth=2；
ctx.strokeStyle='#000000'；
ctx.stroke（）；
var value=this.chart.data.datasets[activePoint.\u datasetIndex].data[activePoint.\u index]；
ctx.font=this.chart.options.tooltips.titleFontStyle+“”+this.chart.options.tooltips.titleFontSize+“px Arial”；
var xPad=this.chart.options.tooltips.xPadding；
var yPad=this.chart.options.tooltips.yPadding；
变量宽度=ctx.measureText（值）.width+xPad*2；
var height=this.chart.options.tooltips.titleFontSize+yPad*2；
var radius=this.chart.options.tooltips.cornerRadius；
log（activePoint、topY、xPad、yPad、ctx.font）；
ctx.fillStyle=this.chart.options.tooltips.backgroundColor；
ctx.lineWidth=this.chart.options.tooltips.borderWidth；
var y=topY；
x=x-宽度/2；
//绘制矩形上部工具提示
ctx.beginPath（）；
ctx.移动到（x+半径，y）；
ctx.lineTo（x+宽度-半径，y）；
ctx.直角曲线（x+宽度，y，x+宽度，y+半径）；
ctx.lineTo（x+宽度，y+高度-半径）；
ctx.直角曲线（x+宽度，y+高度，x+宽度-半径，y+高度）；
ctx.lineTo（x+半径，y+高度）；
ctx.直角曲线（x，y+高度，x，y+高度-半径）；
ctx.lineTo（x，y+半径）；
ctx.二次曲线（x，y，x+半径，y）；
ctx.closePath（）；
ctx.fill（）；
//绘制文本
ctx.textb基线='top'；
ctx.fillStyle=this.chart.options.tooltips.titleFontColor；
ctx.fillText（值，x+xPad，topY+yPad）；
}
}
});
Chart.Tooltip.positioners.custom=函数（元素、事件位置）{
var工具提示=此；
返回{
x:eventPosition.x，
y：元素[0]。\u图表高度
};
}
var ctx=document.getElementById（'chart'）.getContext（'2d'）；
var图表=新图表（ctx{
类型：“MyLine”，
数据：{
标签：[一月、二月、三月、四月、五月、六月、七月]，
数据集：[{
标签：'统计'，
数据：[3,1,2,5,4,7,6]，
背景颜色：“rgba（0，119，204，0.8）”，
边框颜色：“rgba（0，119，204，0.3）”，
填充：假
}]
},
选项：{
回答：错，
图例：{
显示：假
},
动画：错，
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
工具提示：{
//底部工具提示
位置：'自定义'，
caretSize:0，
回调：{
标题：函数（工具提示项、数据）{
返回数据['labels'][tooltipItem[0]['index']]；
},
标签：函数（工具提示项、数据）{
返回“”；
},
afterLabel:函数（工具提示项、数据）{
var数据集=数据['dataset'][0]；
返回“”；
}
},
背景颜色：“#FF0000”，
标题字体：12，
titleFontColor:“#FFFFFF”，
bodyFontColor:“#000”，
标题：2，
显示颜色：false
}
}
});
#图表{
宽度：100%；
}
是的，你明白了！