測試筆記 Chart.js Pie Chat

Chart.js Pie Chat Simple Sample

by no2don

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<div style="width: 400px; height: 400px">
  <canvas id="canvasPie"></canvas>
</div>

JavaScript

//資料標題
            var labels= ['高興','難過'];

            var ctx = document.getElementById('canvasPie').getContext('2d');
            var pieChart = new Chart(ctx, {
              type: 'pie',
              data : {
                labels:labels,
                datasets: [{
                    //預設資料
                    data:[10,90],
                    backgroundColor: [
                    //資料顏色
                                "#00A1FF",
                                "#FF0004"
                    ],
                }],
              }
            });

           
            function changeData()
            {
                //隨機資料
                var randomNum=Math.floor(Math.random() *100) + 1;
                //將隨機資料載入至圖表中
                pieChart.data.datasets[0].data=[randomNum,100-randomNum];
                //更新
                pieChart.update();
            }

            setInterval(changeData,2000);