chart.js生成餅狀圖

第一步：引入chart.js。

 <script src='https://cdn.bootcss.com/Chart.js/2.7.3/Chart.js'></script>

第二步：在html中寫入canvas元素。

 <canvas id="myChart" width="500px" height="150px"></canvas>

第三步：繪圖。

<script src='https://cdn.bootcss.com/Chart.js/2.7.3/Chart.js'></script>

<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var data = {
    datasets: [{
        data: [10,20,30], //在這里寫數據
        backgroundColor:["red","green","blue"] //在這里指定顏色
    }],

    labels: [ //這里寫標簽，即每個數據屬於哪個種類
        'label1', 
        'label2',
        'label3'
    ]
  };

  var myPieChart = new Chart(ctx, {
   type: 'pie',
   data: data
});
  
</script> 

結果：