ChartJs 工具提示仅在鼠标指针悬停在远离图表时才可见

Question

ChartJs 工具提示仅在鼠标指针距该点 10-20 像素时可见。

请看下图。仅当指针不在图表上时才会出现工具提示。当我将鼠标悬停在该点上时，什么也没有。

如何配置选项以获得所需的输出？

我的代码（这是在角度中使用的）

this.lineChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  legend: {
    display: true,
    onClick: null,
    labels: {
      boxWidth: 20,
      generateLabels: function (chart) {
        const labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
        
        return labels;
      }
    }
  },
  tooltips: {
    // callbacks: {
    //   title: function (tooltipItem) {
    //     return self.datePipe.transform(new Date(tooltipItem[0].xLabel), 'short');
    //   }
    // }
  },
  scales: {
    x: {
      ticks: {
        color: [CustomColors.themeChartAxisLightThemeTextColor],
        autoSkip: true,
        autoSkipPadding: 50,
        maxRotation: 0
      },
      type: 'time',
      time: {
        displayFormats: {
          hour: 'h:mm a',
          minute: 'h:mm a',
          second: 'h:mm:ss a',
          day: 'dd-MMM',
          month: 'MMM-yyyy',
          year: 'yyyy'
        }
      },
      grid: {
        color: CustomColors.themeChartAxisLightThemeLineColor,
        borderColor: CustomColors.themeChartAxisLightThemeLineColor,
        display: true,
        drawOnChartArea: true,
        drawTicks: false,
      }
    },
    y: {
      ticks: {
        stepSize: 5,
        precision: 0,
        color: [CustomColors.themeChartAxisLightThemeTextColor],
      },
      grid: {
        color: CustomColors.themeChartAxisLightThemeLineColor,
        borderColor: CustomColors.themeChartAxisLightThemeLineColor,
        display: true,
        drawOnChartArea: true,
        drawTicks: false,
      }
    }
  },
  plugins: {
    annotation: {
      common: {
        drawTime: 'afterDraw'
      },
      annotations: {
      }
    },
    legend: {
      display: true,
      labels: {
        color: CustomColors.themeChartAxisLightThemeTextColor
      }
    },
    zoom: {
      pan: {
        enabled: true,
        mode: 'x',
        scaleMode: 'y'
      },
      zoom: {
        wheel: {
          enabled: true,
        },
        mode: 'x',
      }
    },
    tooltip: {
      mode: 'x',
      intersect: true
    },
    hover: {
      mode: 'x'
    },
  }
};

Answer 1

如果您有 CSS 类为画布分配高度或宽度，请将其删除。

相反，将高度分配给包含画布的顶级 div。这将解决问题。