使用chart.js構建一個包含3個折線圖的簡單網頁。 我把它們都用在了下面這條線上:

var currentAmpChart;
currentAmpChart = new Chart(document.getElementById('amperageChart').getContext('2d'), {

它們都有不同的id:amperage chart、wattageChart和voltageChart。html文件。

<div class="container">
        <div class="chart-container">
            <canvas id="polarChart" width="300em" height="300em"></canvas>
            <canvas id="voltageChart" width="300em" height="300em" aria-label="voltLabel" role="img"></canvas>
        </div>
        <div class="middle-content">
            <div class="th_data">
                <div id="temp">
                    <span id="temperature">20°C</span>
                    <img id="th_img" src="{{url_for('static', filename='images/thermo.svg')}}" alt="Temperature SVG"/>
                </div>
                <div id="hum">
                    <img id="th_img" src="{{url_for('static', filename='images/humid.svg')}}" alt="Humidity SVG"/>
                    <span id="humidity">70%</span>
                </div>
            </div>
            <canvas id="amperageChart" width="300em" height="300em" aria-label="ampLabel" role="img"></canvas>
        </div>
        <div class="chart-container">
            <canvas id="cartesianChart" width="300em" height="300em"></canvas>
            <canvas id="wattageChart" width="300em" height="300em" aria-label="wattLabel" role="img"></canvas>
        </div>
    </div>

他們都有自己獨特的畫布。 當試圖將數據單獨添加到它們中的每一個時，問題出現了，因為數據在所有它們中被更新，因為基本上，所有數據在它們中的每一個中被更新，而不是讓它們僅獲取分配給它們的數據。

更新是這樣完成的:

console.log("Update for voltage: " + volt);
currentVoltChart.data.labels.pop();
currentVoltChart.data.datasets[0].data.pop();
currentVoltChart.data.labels.unshift(0);
currentWattChart.data.datasets[0].data.unshift(volt);
for(let i = 1; i < currentWattChart.data.labels.length; i++) {
    currentWattChart.data.labels[i] = currentWattChart.data.labels[i] - 1;
}
currentVoltChart.update();

圖表是這樣實例化的:(對每個圖表使用initialData和initialLabels)

let initialData = new Array(10).fill(0);
let initialLabels = ['0', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9'];

currentAmpChart = new Chart(document.getElementById('amperageChart').getContext('2d'), {
    type: 'line',
    data: {
        labels: initialLabels,
        datasets: [{
            label: 'mAmpers',
            data: initialData,
            fill: false,
            backgroundColor: 'rgba(196, 34, 83, 0.8)',
            borderColor: 'rgba(196, 34, 83, 0.8)',
            borderWidth: 1,
            tension: 0.2
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                max: 1.0
            }
        }
    }
});

通過這種方式，新數據從原點推出，元素向右移動產生時間推移效果。

我甚至不知道該嘗試什么?？吹剿麄內齻€是獨立的，而不是共享同一個畫布，應該使工作，對不對？另外，我在樹莓派上用這個做這個:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>