使用Chart.JS显示饼图

Question

我已经成功地显示和操作了条形图，但是我不知道如何处理饼图。 当我使用检查工具时，我可以看到那里有东西。 我正在使用以下代码：Chart.js CDN：

图的画布容器：摘自文档的Javascript：

var ctx = document.getElementById("myChart");       
var myChart = new Chart(ctx,{
    type:"pie",
    data: [3, 4],
    options: {
        animation:{
            animateScale:true
        }
    }
});

艾米建议将受到欢迎。

Answer 1

根据文档（ Chart.js-饼图和甜甜圈图 ）， data变量应具有以下结构：

data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
    datasets: [{
    backgroundColor: [ /* backgroundColor is optional */
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
    ], 
    data: [12, 19, 3, 17, 28, 24, 7]
}]

}

如我所见，这就是您的问题。

Answer 2

尝试这个。 有关更多信息，请参见饼图用法 。 如有任何疑问，请发表评论

 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"], datasets: [{ backgroundColor: [ "#2ecc71", "#3498db", "#95a5a6", "#9b59b6", "#f1c40f", "#e74c3c", "#34495e" ], data: [12, 19, 3, 17, 28, 24, 7] }] } }); 

 .container { width: 80%; margin: 15px auto; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> <div class="container"> <h2>Chart.js — Pie Chart Demo</h2> <div> <canvas id="myChart"></canvas> </div> </div>