Javascript React-chartjs-2:饼图工具提示百分比
是否可以从编辑Piechart的工具提示,使其显示百分比而不是默认值预览Javascript React-chartjs-2:饼图工具提示百分比,javascript,reactjs,pie-chart,Javascript,Reactjs,Pie Chart,是否可以从编辑Piechart的工具提示,使其显示百分比而不是默认值预览 <Pie data={this.props.data} legend={this.props.legend} /> 上面链接上的文档不清楚如何自定义工具提示 我想启用工具提示来表示百分比,而不是“取消:303”来显示类似于“取消:303(40%)”的内容 const data = { labels: [ 'MFA', 'NON-MFA' ], datasets:
<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} />
使用
\u meta
获取总数对我来说不再有效。相反,我使用并通过以下方式获得了总数:
let total = 0;
for (let i = 0; i < data.datasets.length; i++) {
total += data.datasets[i].data[tooltipItem.index];
}
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}%)`;
}
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}`
}
},