如何自定义图表.js 2.0 圆环图的工具提示？

您可以使用图表选项工具提示配置部分自定义工具提示，如下所述：http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

如下面的示例代码所示，您可以更改颜色、大小和样式等内容。查看上面链接的文档，了解可配置选项的完整列表。

如果要将百分比添加到工具提示显示中，可以使用工具提示回调。该文档列出了所有可能的可自定义回调字段。

在下面的示例中，我将“title”设置为显示标签名称，“label”用于显示值，并将百分比添加到“afterLabel”中。

var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: {
    tooltips: {
      callbacks: {
        title: function(tooltipItem, data) {
          return data['labels'][tooltipItem[0]['index']];
        },
        label: function(tooltipItem, data) {
          return data['datasets'][0]['data'][tooltipItem['index']];
        },
        afterLabel: function(tooltipItem, data) {
          var dataset = data['datasets'][0];
          var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
          return '(' + percent + '%)';
        }
      },
      backgroundColor: '#FFF',
      titleFontSize: 16,
      titleFontColor: '#0066ff',
      bodyFontColor: '#000',
      bodyFontSize: 14,
      displayColors: false
    }
  }
});

工作 JSFiddle：https://jsfiddle.net/m7s43hrs/

根据 @Tot Zam 的回答，但为了简洁起见，使用箭头函数：

options: {
  tooltips: {
    callbacks: {
      title: (items, data) => data.datasets[items[0].datasetIndex].data[items[0].index].myProperty1,
      label: (item, data) => data.datasets[item.datasetIndex].data[item.index].myProperty2
    }
  }
}

任何在 2021 年寻找解决方案以将标签设置为工具提示标题的人，下面的代码片段都可以。使用 console.dir（tooltipItems） 查看 tooltipItems 的内容。

callbacks: {
        title: function (tooltipItems) {
          return tooltipItems[0].formattedValue;
        }
      }

感谢 Tuhin 的回答。它帮助我弄清楚如何使用回调函数更改工具提示标题。

我对 javascript 很陌生，所以从 Chart.js 3.4.1 文档中我并不明显地了解如何使用 tooltip 对象。通过使用控制台.log（tooltipItems），正如建议的那样，我能够获得所需的信息。

我最终得到了一个配置对象，在 options.plugins 中设置了以下回调。我希望将缩短的日期字符串显示为工具提示的标题。使用 toDateString（） 可以解决问题。

以下是我设置回调的方法：

    options: {
      ...

      plugins: {
        tooltip: {
          callbacks: {
            title: tooltipItems => {
              title = tooltipItems[0].parsed.x
              if (title !== null) {
                console.dir(title)
                title = new Date(title).toDateString()
              }
              return title
            },
          },
        },
      },
    },

对于使用最新 Chart.js v3.5.1 版本的用户，您可以添加以下代码来自定义工具提示。

将下面的插件对象添加到图表选项

plugins: {
  tooltip: {
    enabled: true,
    usePointStyle: true,
    callbacks: { 
      // To change title in tooltip
      title: (data) => { return data[0].parsed.x } 

      // To change label in tooltip
      label: (data) => { 
            return data.parsed.y === 2 ? "Good" : "Critical"
      }
    },
  },
},

嗨，我找到了一个实用的解决方案来格式化工具提示的文本

 const label = (context) => {
   
    let lbl = context.label+' '+ context.formattedValue+' ' + '%'
    return lbl
  }
  const chartOptions = { 
    plugins:{
      tooltip: {
        callbacks: {
            label: label,
        }, 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

下面是一个带有工具提示的圆环图示例（Chart.js 4.4.0）：

let chart = new Chart(el.getContext('2d'), {
    type: 'doughnut',
    data: {
      datasets: [
        {
          data: this.doughnutData
        }
      ]
    },
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            label: function(context) {
              var label = context.dataset.data[context.dataIndex]['label'];
              var value = context.formattedValue;
              return label + ' : ' + value + ' %';
            }
          }
        }
      },
      responsive: true,
      // This doughnut chart will respond to mousemove or click (show label-percentage).
      events: ['click','mousemove']
    }
  });

它工作正常，希望它能帮助:)

工具提示文档：https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-context。