REACT-CHARTJS-2：饼图工具提示百分比

本教程将介绍REACT-CHARTJS-2：饼图工具提示百分比的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

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

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

上面链接的文档对自定义工具提示一无所知。

我也希望启用工具提示来表示百分比，而不是使用‘已取消：303’来显示类似‘已取消：303(40%)’之类的内容。

推荐答案

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} />

好了关于REACT-CHARTJS-2：饼图工具提示百分比的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。