React-chartjs-2：饼图工具提示百分比答案

【问题标题】：React-chartjs-2: Pie Chart tooltip percentageReact-chartjs-2：饼图工具提示百分比
【发布时间】：2020-11-11 11:08:34
【问题描述】：

是否可以从React-chartjs-2 lib 编辑 Piechart 的工具提示以使其显示百分比而不是默认值预览？

<Pie
   data={this.props.data}
   legend={this.props.legend}
/>

上面链接上的文档不清楚自定义工具提示。

我也想启用工具提示来表示百分比，而不是“cancelled:303”来显示类似“cancelled:303 (40%)”的内容。

【问题讨论】：

标签： javascript reactjs pie-chart

【解决方案1】：

const data = {
  labels: [
    'MFA',
    'NON-MFA'
  ],
  datasets: [{
    data: [5667, 223829],
    backgroundColor: [
    '#FF6384',
    '#36A2EB'
    ],
    hoverBackgroundColor: [
    '#FF6384',
    '#36A2EB'
    ]
  }]
};

const option = {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var dataset = data.datasets[tooltipItem.datasetIndex];
        var meta = dataset._meta[Object.keys(dataset._meta)[0]];
        var total = meta.total;
        var currentValue = dataset.data[tooltipItem.index];
        var percentage = parseFloat((currentValue/total*100).toFixed(1));
        return currentValue + ' (' + percentage + '%)';
      },
      title: function(tooltipItem, data) {
        return data.labels[tooltipItem[0].index];
      }
    }
  }
}

然后在渲染部分，放：

<Pie data={data} options={option} />

【讨论】：

【解决方案2】：

使用._meta 不再对我有用。相反，我使用DemiJiang's answer 并通过以下方式获得总数：

let total = 0;
for (let i = 0; i < data.datasets.length; i++) {
  total += data.datasets[i].data[tooltipItem.index];
}

所以我在 TypeScript 中的整个 label 回调看起来像：

static numberWithPercentageLabel(tooltipItem: any, data: any) {
  const dataset = data.datasets[tooltipItem.datasetIndex];
  const currentValue = dataset.data[tooltipItem.index];
  let total = 0;
  for (let i = 0; i < data.datasets.length; i++) {
    total += data.datasets[i].data[tooltipItem.index];
  }
  const percentage = (currentValue / total * 100).toFixed(0);
  return `${currentValue} (${percentage}%)`;
}

【讨论】：

【解决方案3】：

tooltips: {
    callbacks: {
        label: (tooltipItem, data) => {
            const dataset = data.datasets[tooltipItem.datasetIndex];
            const meta = dataset._meta[Object.keys(dataset._meta)[0]];
            const total = meta.total;
            const currentValue = tooltipItem?.value;
            const percentage = parseFloat((currentValue/total*100).toFixed(1));
            return currentValue + ' (' + percentage + '%)';
        },
        title: tooltipItem =>
            `${tooltipItem[0]?.label}`
    }
},

【讨论】：