React + Chart.js 2.0:如何在甜甜圈图表中放置标签？

Question

我做的数据可视化与react,react-chartjs-2和chart.js2.2.1版本.有一种可能是有关这个问题的答案在这里(寻找16年6月17日更新),但我不知道什么Chart.pluginService.register是或者是否是与之反应兼容.到目前为止,它对我没用.

我只是想在甜甜圈中放置一个标签,它是所有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？edit = 1010