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

Question

我有一个我需要绘制的图表，除了数据点之外，我还想要一个带有自定义文本字符串的（某些）数据点上方的图标。

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

自定义数据标签似乎不够灵活，无法在不同的数据点上允许不同的图标/弹出框，不过我可能是错的。

另一种可能性是chartjs-plugin-datalabels，但我不确定。

Answer 1

如果您的图表（画布）大小固定，您可以通过添加一个附加项来轻松解决此问题dataset，该附加项只指定图表中要显示的图标。

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

给定数据数组data2和数组imageIndexes，可以使用 构建data图标。请注意，这些值（如果有的话）源自 中的相应值，但稍微增加以使图像出现在它们的顶部。datasetArray.mapdata2

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

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

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

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

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

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