JSFiddle - React, Tailwind, and code Playground

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: 500px; height: 500px">
            <canvas id="canvasLine"></canvas>
        </div>

JavaScript

// 資料集合，之後只要更新這個就好了。
            var datas=[];
            var ctx = document.getElementById('canvasLine').getContext('2d');
            var lineChart = new Chart(ctx, {
              type: 'polarArea',
              data: {
                 labels: ['清新','50LAN','COCO'],
                 datasets: [{
                    backgroundColor: [
                    "#467500",
                    "#FFFF93",
                    "#C7C7E2"
                    ],
                    data:[0,0,0]
                 }]
              }
            });

            //時間格式
            var timeFormat = 'HH:mm:ss';
            
            function appendData()
            {
                lineChart.data.datasets.data=[];
                //lineChart.update();
                datas=[];
                datas.push(Math.floor(Math.random() *10) + 1);
                datas.push(Math.floor(Math.random() *10) + 1);
                datas.push(Math.floor(Math.random() *10) + 1);
                lineChart.data.datasets[0].data=datas;
                lineChart.update();
                //更新線圖
               
            }

            //每秒做一次
            setInterval(appendData,1000);