Chart.js 饼图固定 Tooltip 内容 | 代码示例

要固定饼图的 tooltip，您可以使用 Chart.js 的回调函数来自定义饼图的 tooltip 行为。具体来说，您可以使用 'options.tooltips.callbacks.label' 回调函数来自定义 tooltip 标签的显示。以下是一个示例代码，用于在饼图上固定显示 tooltip：

var options = {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        // 获取数据集中对应的标签和数值
        var label = data.labels[tooltipItem.index];
        var value = data.datasets[0].data[tooltipItem.index];
        // 返回自定义的 tooltip 标签
        return label + ': ' + value;
      }
    }
  }
};

var data = {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
  }]
};

var chart = new Chart(document.getElementById('myChart'), {
  type: 'pie',
  data: data,
  options: options
});

在上面的代码中，我们通过将 'options.tooltips.callbacks.label' 设置为一个函数来自定义 tooltip 的标签。该函数获取当前 tooltip 的索引（'tooltipItem.index'）和数据集（'data'），并使用它们来获取对应的标签和数值。最后，它返回自定义的 tooltip 标签，这里简单地将标签和数值连接起来。使用这种方法，您可以根据需要自定义 tooltip 的标签，并在饼图上固定展示它们。