javascript - React + Chart.js 2.0：如何在圆环图中添加标签？

Question

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

我只是想在甜甜圈内放置一个标签，它是所有data子集的总和。我认为这是嵌套在圆环图选项中的某个地方，但我还没有找到它。

Answer 1

在react-chartjs-2您可以通过chart.config.data.datasets.

因此对于：

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

在draw回调中，Chart.helpers.extend您可以使用：

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