React + chart. js 2.0:如何在甜甜圈图中添加标签

React + Chart.js 2.0: How to put a label inside of a doughnut chart?

本文关键字：甜甜圈 加标签 添加 chart js React      更新时间：2023-09-26

我正在使用react, react-chartjs-2和chart.js版本2.2.1进行数据可视化。这里有一个可能与这个问题相关的答案(寻找17.06.16更新)，但我不确定Chart.pluginService.register是什么，或者它是否与React兼容。到目前为止，这对我来说还不起作用。

我只是想在甜甜圈内放置一个标签，这是所有data子集的总和。我假设这是嵌套在甜甜圈图的选项，但我还没有找到它。

在react-chartjs-2中您可以通过chart.config.data.datasets访问数据集。

: 

data = {
    labels: [
        'Red',
        'Green',
        'Yellow'
    ],
    datasets: [{
        data: [300, 50, 100],
    ...

在Chart.helpers.extend的draw回调中，你可以使用:

var sum = 0;
for (var i = 0; i < this.chart.config.data.datasets[0].data.length; i++) {
   sum += this.chart.config.data.datasets[0].data[i];
}

下面是一个示例Codepen: http://codepen.io/anon/pen/xqMQQB?editors=1010

相关文章：