ChartJs工具提示异常：仅远离数据点/图表时显示的配置求助

问题描述 #

在Angular项目中使用Chart.js时出现异常：工具提示仅在鼠标指针距离数据点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'
    },
  }
};

修复方案 #

通过调整以下关键配置项即可解决问题：

核心调整点 #

• 移除根层级的旧版tooltips配置（Chart.js v3+已统一使用plugins.tooltip）
• 将plugins.tooltip.intersect设为false，取消精确命中要求，同一x轴区域内即可触发工具提示
• 修改annotation插件的drawTime为beforeDraw，避免图层覆盖导致交互判定异常
• 同步hover配置的intersect为false，保持交互逻辑一致

修改后的完整配置 #

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;
      }
    }
  },
  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: 'beforeDraw' // 调整绘制顺序，避免干扰交互判定
      },
      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: false // 取消精确命中，适配时间轴交互
    },
    hover: {
      mode: 'x',
      intersect: false // 同步hover逻辑
    },
  }
};

内容的提问来源于stack exchange，提问作者Patola