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

Question

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

我只是想在 donut 内放置一个标签，它是所有 data 子集的总和。我假设这是嵌套在 doughnut chart's options 中的某处，但我还没有找到它。

Answer 1

在 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