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

Question

是否可以编辑饼图的工具提示，从React-chartjs-2 lib允许它显示百分比而不是默认值预览？

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

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

我想启用工具提示来表示百分比，而不是“已取消：303 ”以显示类似“已取消：303（40％）”的内容。< / p>

Answer 1

使用._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}%)`;
}

Answer 2

  Animals planets
1  dragon    Mars