在 ChartJs 中使用注释时不显示工具提示答案

【问题标题】：Tooltip is not displayed when using annotation in ChartJs在 ChartJs 中使用注释时不显示工具提示
【发布时间】：2021-10-27 18:29:47
【问题描述】：

当用户尝试将鼠标悬停在一个点上时，它只显示一条蓝线，但它没有显示工具提示，结果如下
lib 版本：
"chart.js": "^2.9.3", "chartjs-plugin-annotation": "^0.5.7"

实际：enter image description here
预期：enter image description here

在图表配置中

 export chart = () => {
         data:{ ... }, 
         options: {
             tooltips: {
              displayColors: false,
              mode: 'index', intersect: true,
              callbacks: {
                label: function (tooltipItem, data) {
                  return `${data.datasets[tooltipItem.datasetIndex].label}(${Math.round(tooltipItem.xLabel * 100) / 100
                    },${Math.round(tooltipItem.yLabel * 100) / 100})`;
                },
              },
            },
            legend: {
              display: false,
            },
            annotation: {
              drawTime: "afterDatasetsDraw",
              events: ["mouseover"],
              annotations: [],
            },
        }
    }

convertToHoverLine();

export const convertToHoverLine = (value, scaleID) => {
  return {
    key: "hoverLine",
    type: "line",
    mode: "vertical",
    scaleID,
    value,
    borderColor: "blue",
    onMouseout: null,
    onMouseover: null,
  }
}

handleHoverChart(); => 当用户在图表上悬停一个点时，此函数将触发

   export const handleHoverChart = (myChart, x, scaleID) => {
         const indexLine = myChart.options.annotation.annotations.findIndex(i => i.key === "hoverLine")
         if (indexLine === -1) {
            myChart.options.annotation.annotations.push(convertToHoverLine(x,scaleID))
         } else {
           myChart.options.annotation.annotations[indexLine] = convertToHoverLine(x,scaleID);
           }
  myChart.update()
}

【问题讨论】：

标签： vue.js chart.js

【解决方案1】：

我通过将图表更新移动到条件中解决了这个问题

export const handleHoverChart = (myChart, x, scaleID) => {
       const indexLine = myChart.options.annotation.annotations.findIndex(i => i.key === "hoverLine")
       if(indexLine === -1){   
           myChart.options.annotation.annotations.push(convertToHoverLine(x,scaleID))
           myChart.update()
        }else{
              myChart.options.annotation.annotations[indexLine] = convertToHoverLine(x,scaleID);
             }
 }

【讨论】：