如何自定义Chart.js 2.0 Donut Chart的工具提示？

Question

我正在尝试使用Chart.js2中的圆环图显示一些数据.

我目前的图表如下所示:

我想要的输出必须显示另一个属性,即百分比,如下所示:

我已经阅读了文档,但我无法应对这一点,因为它非常通用,我是JavaScript的新手.

我的第一个图表的代码如下:

const renderCashCurrencyPie = (cashAnalysisBalances) => {
  if (cashAnalysisBalances) {
    const currenciesName = cashAnalysisBalances
    .map(curName => curName.currency);

    const availableCash = cashAnalysisBalances
    .map(avCash => avCash.availableCash);

    let currenciesCounter = 0;
    for (let i = 0; i < currenciesName.length; i += 1) {
      if (currenciesName[i] !== currenciesName[i + 1]) {
        currenciesCounter += 1;
      }
    }

    const currenciesData = {
      labels: currenciesName,
      datasets: [{
        data: availableCash,
        backgroundColor: [
          '#129CFF',
          '#0C6DB3',
          '#FF6384',
          '#00FFFF'
        ],
        hoverBackgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#00FFFF'
        ]
      }]
    };

Answer 1

您可以使用图表选项工具提示配置部分自定义工具提示,如下所述: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/

Answer 2

根据@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
    }
  }
}

Answer 3

对于使用最新 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"
      }
    },
  },
},