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

2022-06-15 00:00:00 reactjs pie-chart javascript

是否可以从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} />

相关文章