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

Question

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

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

包括This question 和This question 和this question，它们都失败或实际上不会更改任何工具提示显示。

https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0 的引用很多，但这不适用于 ChartJS v3；我已经从这里安装了第 3 版的 ChartJS 数据标签：

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

但使用This answer 仍然不起作用。

我在ChartJS Datalabels Plugin documentation 上看不到如何实现我正在寻找的东西。

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

我在ChartJS Tooltip documentation 上看不到任何关于如何实际编辑工具提示文本内容的信息。

所以，我的代码：

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

要使用 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>

Answer 2

如果您使用的是 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;
            }
        }
    }
}]