ChartJS 版本 3 如何向饼图工具提示添加百分比

Question

我正在尝试在 ChartJS 3.2.1 中向饼图添加百分比

我从广泛的搜索参考 ChartJS 版本 1 或 2 中找到了所有答案和代码。

包括这个问题和这个问题以及这个问题都失败或者实际上没有改变任何工具提示显示。

有很多参考资料，https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0但这在 ChartJS v3 上不起作用；我已经从这里安装了版本 3 的 ChartJS Datalabels：

https://github.com/chartjs/chartjs-plugin-datalabels/releases/tag/v2.0.0

但使用这个答案仍然不起作用。

我在ChartJS Datalabels 插件文档中看不到如何实现我正在寻找的内容。

我正在寻找要在工具提示悬停或饼图本身上显示的饼图每一块的百分比，但不在标签/图例上显示。

我在ChartJS 工具提示文档中看不到任何有关如何实际编辑工具提示文本内容的内容。

所以，我的代码：

JS：

    var dnct1 = document.getElementById('DoeNut1');
    var myChart1 = new Chart(dnct1, {
    type: 'doughnut',
    data: {
          labels: ["Scotland and Northern Ireland","North East England","North West","Midlands","East Anglia","South England"],
          datasets: [{
               label: ["Scotland and Northern Ireland","North East England","North West","Midlands","East Anglia","South England"],
               data: ["510","887","720","837","993","774","977"],
               borderWidth: 0,
               hoverOffset: 5,
               backgroundColor: ['#F3AC16','#9F9F9F','#FF3355', '#55EE22','#354D73','#553FCF'],
               cutout: 0
          }]
    },
options: {
   tooltips: {
         enabled: true,
   },
   layout: {
        padding: {
            bottom: 25
         }
   },
   plugins: {
        /** Imported from a question linked above. 
            Apparently Works for ChartJS V2 **/
        datalabels: {
            formatter: (value, dnct1) => {
                let sum = 0;
                let dataArr = dnct1.chart.data.datasets[0].data;
                dataArr.map(data => {
                    sum += data;
                });
                let percentage = (value*100 / sum).toFixed(2)+'%';
                return percentage;
            },
            color: '#ff3'
        }
    }
}
});
 

HTML：

<div class='chartBox'>
     <h2>Title</h2>
     <canvas id='DoeNut1'></canvas>
</div> 

上面没有返回浏览器控制台错误，所有图表都正确显示，但工具提示不显示任何百分比。我看不出出了什么问题。

Answer 1

如果您使用的是 ChartJS v3，那么我可以让它在没有任何额外插件的情况下工作。我在数据集级别覆盖了工具提示。

datasets: [{
    label: 'Industries',
    data: [1, 5, 10, 14, 15],
    tooltip: {
        callbacks: {
            label: function(context) {
                let label = context.label;
                let value = context.formattedValue;

                if (!label)
                    label = 'Unknown'

                let sum = 0;
                let dataArr = context.chart.data.datasets[0].data;
                dataArr.map(data => {
                    sum += Number(data);
                });

                let percentage = (value * 100 / sum).toFixed(2) + '%';
                return label + ": " + percentage;
            }
        }
    }
}]

Answer 2

要使用 datalabels 插件，您需要注册它，还请先阅读迁移指南（https://www.chartjs.org/docs/master/getting-started/v3-migration.html），因为您使用的是 v2 语法例如，您的工具提示不起作用。

要获取工具提示中的百分比，您可以使用任何回调（https://www.chartjs.org/docs/master/configuration/tooltip.html#tooltip-callbacks），请参阅下面的示例以了解数据标签和要显示的页脚回调百分比：

var dnct1 = document.getElementById('DoeNut1');
var myChart1 = new Chart(dnct1, {
  type: 'doughnut',
  data: {
    labels: ["Scotland and Northern Ireland", "North East England", "North West England", "North Wales and West Midlands", "East Midlands and East Anglia", "South Wales and South West England", "South East England"],
    datasets: [{
      label: ["Scotland and Northern Ireland", "North East England", "North West England", "North Wales and West Midlands", "East Midlands and East Anglia", "South Wales and South West England", "South East England"],
      data: ["510", "887", "720", "837", "993", "774", "977"],
      borderWidth: 0,
      hoverOffset: 5,
      backgroundColor: ['#F3AC16', '#9F9F9F', '#FF3355', '#55EE22', '#354D73', '#666633', '#553FCF'],
      cutout: 0
    }]
  },
  options: {
    layout: {
      padding: {
        bottom: 25
      }
    },
    plugins: {
      tooltip: {
        enabled: true,
        callbacks: {
          footer: (ttItem) => {
            let sum = 0;
            let dataArr = ttItem[0].dataset.data;
            dataArr.map(data => {
              sum += Number(data);
            });

            let percentage = (ttItem[0].parsed * 100 / sum).toFixed(2) + '%';
            return `Percentage of data: ${percentage}`;
          }
        }
      },
      /** Imported from a question linked above. 
          Apparently Works for ChartJS V2 **/
      datalabels: {
        formatter: (value, dnct1) => {
          let sum = 0;
          let dataArr = dnct1.chart.data.datasets[0].data;
          dataArr.map(data => {
            sum += Number(data);
          });

          let percentage = (value * 100 / sum).toFixed(2) + '%';
          return percentage;
        },
        color: '#ff3',
      }
    }
  },
  plugins: [ChartDataLabels]
});

<body>
    <canvas id="DoeNut1" width="600" height="400"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.js" ></script>
</body>