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} />
相关文章