将数字放在图形中

Question

如何在甜甜圈图形中输入数字？

我需要显示每个元素的百分比。我现在开始看图表JS，我能做到吗？

我想像

一样展示

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
       labels: [
        "Red",
        "Blue",
        "Yellow"
    ],
    datasets: [
        {
            data: [300, 50, 100],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Answer 1

将数据输入Chart对象时，可以将数据数组修改为百分比。例如：

original_data=[300, 50, 100];
var data=[];
var total=300+50+100 //You can also calculate the total sum with another for loop...
for(var i = 0; i < original_data.length;i++){
    data[i]=original_data[i]/total*100;
}

我知道这不是最美丽的答案，但它有效......