Chart.js繪製動態折線圖

DogLeftover發表於2024-03-14
JS

案例1

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>動態折線圖</title>  
    <!-- 引入 Chart.js 庫 -->  
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>  
</head>  
<body>  
    <!-- 建立用於承載圖表的HTML元素 -->  
    <canvas id="myChart" width="400" height="200"></canvas>  
  
    <script>  
        // 初始化折線圖  
        var ctx = document.getElementById('myChart').getContext('2d');  
        var chart = new Chart(ctx, {  
            type: 'line', // 圖表型別  
            data: {  
                labels: [], // x軸標籤  
                datasets: [{  
                    label: '資料',  
                    data: [], // y軸資料  
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',  
                    borderColor: 'rgba(75, 192, 192, 1)',  
                    borderWidth: 1  
                }]  
            },  
            options: {  
                scales: {  
                    y: {  
                        beginAtZero: true  
                    }  
                }  
            }  
        });  

        var arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  
        // 新增新資料點的函式  
        function addData(value) {  
            // 獲取當前時間作為x軸標籤  
            // var label = new Date().toLocaleTimeString();  
            // 更新資料集和標籤  
            // chart.data.labels.push(label);  
            chart.data.labels.push(arr.shift());  
            chart.data.datasets[0].data.push(value);  
  
            // 更新圖表  
            chart.update();  
        }  
  
        // 初始新增一些資料點  
        addData(12);  
        addData(19);  

        var data = [3, 25, 82, 3, 12, 19, 3, 65, 62, 3];  
  
        // 每秒新增一個新資料點來模擬動態資料  
        // setInterval(function() {  
        //     addData(Math.random() * 100); 
        // }, 1000);  

        var counter = 0; // 初始化計數器  
        var maxCount = 12; // 設定最大執行次數  
        
        // 定時執行的函式  
        function timedAction() {  
            console.log('定時器執行了 ' + (counter + 1) + ' 次');  
            counter++; // 計數器遞增  
            addData(data.shift()); 
        
            // 檢查是否達到最大執行次數  
            if (counter < maxCount) {  
                // 如果沒達到，則設定下一次定時器  
                setTimeout(timedAction, 1000); // 每秒執行一次  
            } else {  
                console.log('定時器已執行完12次');  
                // 重新整理頁面  
                location.reload(); 
            }  
        }  
        
        // 啟動定時器  
        timedAction();
    </script>  
</body>  
</html>
  • 效果圖
點選檢視詳情

案例2

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>動態折線圖</title>  
    <!-- 引入 Chart.js 庫 -->  
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>  
</head>  
<body>  
     <!-- 建立用於承載圖表的HTML元素 -->  
    <div id="chartContainer" style="width: 600px; height: 400px;">  
        <canvas></canvas>
    </div>
    <script>  
        // 假設您有一些資料  
const labels = ['21-01', '21-02', '21-03', '21-04', '21-05', '21-06', '21-07', '21-08', '21-09', '21-10', '21-11', '21-12', 
                '22-01', '22-02', '22-03', '22-04', '22-05', '22-06'];  
const data = [12, 19, 3, 25, 82, 3, 12, 19, 3, 65, 62, 3, 12, 19, 73, 5, 2, 93];  
  
// 建立Chart.js例項  
const canvas = document.querySelector('#chartContainer canvas');  
const ctx = canvas.getContext('2d');  
const chart = new Chart(ctx, {  
    type: 'line',  
    data: {  
        labels: labels,  
        datasets: [{  
            label: 'Sales',  
            data: data,  
            fill: false,  
            borderColor: 'rgb(75, 192, 192)',  
            tension: 0.1  
        }]  
    },  
    options: {  
        scales: {  
            x: {  
                beginAtZero: true,  
                // 設定x軸的最大顯示標籤數，以控制滾動範圍  
                maxTicksLimit: 10,  
                // 禁用x軸的網格線，以便更好地看到滾動效果  
                grid: {  
                    display: false  
                }  
            }  
        }  
    }  
});  
  
// 初始化滾動偏移量  
let offset = 0;  
  
// 設定定時滾動函式  
function scrollChart() {  
    // 每次呼叫時增加偏移量，實現向左滾動效果  
    offset++;  
    if (offset > labels.length - chart.options.scales.x.maxTicksLimit) {  
        // 重新整理頁面  
        location.reload();  
        // 當滾動到圖表末尾時，重置偏移量以迴圈顯示資料  
        offset = 0;  
    }  
    // 更新圖表的x軸最小和最大值來實現滾動效果  
    chart.options.scales.x.min = offset;  
    chart.options.scales.x.max = offset + chart.options.scales.x.maxTicksLimit;  
    // 更新圖表以顯示更改  
    chart.update();  
}  
  
// 設定定時器，每1000毫秒（1秒）呼叫一次scrollChart函式  
setInterval(scrollChart, 1000);
    </script>  
    
</body>  
</html>
  • 效果圖
點選檢視詳情

相關文章