Chart.js 如何禁用悬停标签

在 Chart.js 中，悬停标签是指鼠标悬停在图表上时显示的提示框。默认情况下，图表会自动显示这些悬停标签。但是有时候这些标签可能会干扰我们的视线，因此需要将其禁用。

禁用全部悬停标签

要禁用所有悬停标签，只需在 options 部分中添加以下代码：

options: {
  tooltips: {
    enabled: false
  }
}

上述代码会将所有悬停标签禁用。

禁用特定数据集的悬停标签

如果您只想禁用特定数据集的悬停标签，则可以在数据集中指定 hover 选项：

data: {
  datasets: [{
    data: [10, 20, 30],
    hover: false
  }]
}

上面的代码将禁用第一个数据集的悬停标签。

示例

以下是一个示例，演示了如何将所有悬停标签禁用：

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      enabled: false
    },
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

在上面的示例中，tooltips 选项为禁用所有悬停标签，scales 选项用于设置 Y 轴的起始值为 0。

结论

通过使用 Chart.js 的选项，我们可以轻松禁用所有或指定数据集的悬停标签。这对于需要自定义图表外观的开发者来说非常有用。