Javascript Chart.js-使用工具提示绘制任意点

我已经实现了中描述的技术，在图表上呈现垂直线，以显示重要事件发生时的关键日期

但是，描述这些事件的文本可能相当长，因此仅在画布上绘制文本并不是一个好的解决方案

是否有某种方法可以使用chart.js API在图表上绘制一个不可见的点（在该行的顶部），当鼠标悬停在该点上时，该点将变为交互式并显示工具提示

---

就我所见，只有数据点会显示工具提示。我试图添加另一个系列来包含线条数据，但没有多大成功-它还为这个系列创建了一个图例，这是我不想要的。我将值设置为9999，试图让它们显示在画布的顶部，但这不起作用，看起来像是一个黑客。

您可以添加第二个数据集，该数据集在绘制垂直线的x位置包含一个值，其值应对应于第一个数据集的最高值。要使点不可见，请使用

'rgba（0,0,0,0）

定义透明背景和边框颜色

要仅显示相关数据集的图例标签，需要定义一个函数

legend: {
  labels: {
    filter: legendItem => legendItem.datasetIndex == 0
  }
},

此外，我们需要定义一些函数来在工具提示中显示所需的数据

请看一下下面的可运行代码片段，看看它是如何工作的。这段代码使用了Chart.js的最新稳定版本（目前为2.9.3）

新图表（'canvas'{
键入：“行”，
插件：[{
绘制前：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-0']；
var yAxis=图表刻度['y轴-0']；
ctx.save（）；
var lineAtIndex=chart.data.datasets[0].lineAtIndex；
var x=xAxis.getPixelForTick（lineAtIndex）；
ctx.strokeStyle='#ff0000'；
ctx.beginPath（）；
ctx.moveTo（x，yAxis.bottom）；
ctx.lineTo（x，yAxis.top）；
ctx.stroke（）；
ctx.restore（）；
}
}],
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[{
标签：“我的数据集”，
数据：[12,3,2,1,8,8,2,2,3,5,7,1]，
线性指数：2，
行工具提示：[“这是”、“多行”、“工具提示”]
},
{
数据：[null，null，12]，
点半径：10，
背景颜色：“rgba（0,0,0,0）”，
边框颜色：“rgba（0,0,0,0）”
}
]
},
选项：{
图例：{
标签：{
筛选器：legendItem=>legendItem.datasetIndex==0
}
},
工具提示：{
回调：{
标题：（工具提示项，数据）=>{
如果（工具提示项[0].datasetIndex==0）{
返回数据。标签[tooltipItems[0]。索引]；
}
返回数据。数据集[0]。lineTooltip；
},
标签：（工具提示项，数据）=>{
如果（tooltipItems.datasetIndex==0）{
返回data.dataset[0]。label+'：'+data.dataset[0]。data[tooltipItems.index]；
}
返回null；
}
}
},
}
});
您可以添加第二个数据集，该数据集在应绘制垂直线的x位置包含单个值，其值应与第一个数据集的最高值相对应。要使点不可见，请使用
'rgba（0,0,0,0）
定义透明背景和边框颜色

要仅显示相关数据集的图例标签，需要定义一个函数

legend: {
  labels: {
    filter: legendItem => legendItem.datasetIndex == 0
  }
},

此外，我们需要定义一些函数来在工具提示中显示所需的数据

请看一下下面的可运行代码片段，看看它是如何工作的。这段代码使用了Chart.js的最新稳定版本（目前为2.9.3）


新图表（'canvas'{
键入：“行”，
插件：[{
绘制前：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-0']；
var yAxis=图表刻度['y轴-0']；
ctx.save（）；
var lineAtIndex=chart.data.datasets[0].lineAtIndex；
var x=xAxis.getPixelForTick（lineAtIndex）；
ctx.strokeStyle='#ff0000'；
ctx.beginPath（）；
ctx.moveTo（x，yAxis.bottom）；
ctx.lineTo（x，yAxis.top）；
ctx.stroke（）；
ctx.restore（）；
}
}],
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[{
标签：“我的数据集”，
数据：[12,3,2,1,8,8,2,2,3,5,7,1]，
线性指数：2，
行工具提示：[“这是”、“多行”、“工具提示”]
},
{
数据：[null，null，12]，
点半径：10，
背景颜色：“rgba（0,0,0,0）”，
边框颜色：“rgba（0,0,0,0）”
}
]
},
选项：{
图例：{
标签：{
筛选器：legendItem=>legendItem.datasetIndex==0
}
},
工具提示：{
回调：{
标题：（工具提示项，数据）=>{
如果（工具提示项[0].datasetIndex==0）{
返回数据。标签[tooltipItems[0]。索引]；
}
返回数据。数据集[0]。lineTooltip；
},
标签：（工具提示项，数据）=>{
如果（tooltipItems.datasetIndex==0）{
返回data.dataset[0]。label+'：'+data.dataset[0]。data[tooltipItems.index]；
}
返回null；
}
}
},
}
});