Chart.js ChartJs折线图-在一些数据点上方显示永久图标，文本悬停

我有一个图表，我需要绘制，除了数据点，我想要一个图标永久以上（一些）数据点与自定义文本字符串

我不需要默认值popover，因为我可以使用自定义图例，但我需要在一个或两个点上方添加一个图标，并在图标悬停时显示一个popover。我需要从与图表无关的数据构建popover文本字符串

自定义数据标签似乎不够灵活，无法在不同的数据点上显示不同的图标/弹出框，但我可能错了

另一种可能性是，但我不确定

如果图表（画布）大小固定，您可以通过添加额外的

数据集来轻松解决此问题，该数据集只指定要在图表中显示的图标

{
  data: data2.map((v, i) => imageIndexes.includes(i) ? v + 1.2 : null),
  fill: false,
  pointStyle: icon,
  pointRadius: 22,
  pointHoverRadius: 22
}

给定数据数组
data2
和数组
imageIndexes
，图标
dataset
的
data
可以使用构建。请注意，这些值（如果有的话）是从
data2
中的相应值派生出来的，但会稍微增加，以使图像显示在它们的顶部

data2.map((v, i) => imageIndexes.includes(i) ? v + 1.2 : null)

此外，您还需要在图表
options
中定义一个对象，以设置弹出窗口的样式，并确保仅当鼠标悬停在图标上时才显示工具提示

tooltips: {
  filter: tooltipItem => tooltipItem.datasetIndex == 2,
  titleFontSize: 16,
  titleAlign: 'center',
  callbacks: {
    title: (tooltipItem) => tooltipItem.length == 0 ? null : tooltipText,
    label: () => null
  }
},

请看下面截取的可运行代码


const labels=['A'，'B'，'C'，'D'，'E'，'F']；
常量警报=['B'，'D']；
常量数据1=[0,2,1,3,2,1]；
常量数据2=[1,3,3,4,3,2]；
常量imageIndexes=[1,3]；
const tooltipText='标准曲线的效率\n不理想'；
var icon=新图像（）；
icon.src=https://i.stack.imgur.com/YvlWY.png';
常量图表=新图表（document.getElementById（“myChart”）{
键入：“行”，
数据：{
标签：标签，
数据集：[{
数据：数据1，
填充：假，
背景颜色：“蓝色”，
边框颜色：“蓝色”，
线张力：0，
点半径：5，
点半径：5，
点边界宽度：3，
pointHoverBorderWidth:3，
pointBorderColor:'白色'，
pointHoverBorderColor:“白色”
},
{
数据：数据2，
填充：假，
展示线：错，
背景颜色：“橙色”，
点半径：4，
点半径：4
},
{
数据：data2.map（（v，i）=>imageIndexes.includes（i）？v+1.2:null），
填充：假，
点样式：图标，
点半径：22，
点半径：22
}
]
},
选项：{
回答：错，
标题：{
显示：假
},
图例：{
显示：假
},
工具提示：{
筛选器：tooltipItem=>tooltipItem.datasetIndex==2，
标题字体：16，
titleAlign:“中心”，
回调：{
标题：（tooltipItem）=>tooltipItem.length==0？null:tooltipText，
标签：（）=>null
}
},
比例：{
雅克斯：[{
滴答声：{
分:0,，
最高：6，
步长：1
}
}],
xAxes：[{
网格线：{
显示：假
}
}]
}
}
});