使用chart.js構(gòu)建一個(gè)包含3個(gè)折線圖的簡(jiǎn)單網(wǎng)頁。 我把它們都用在了下面這條線上:

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>

他們都有自己獨(dú)特的畫布。 當(dāng)試圖將數(shù)據(jù)單獨(dú)添加到它們中的每一個(gè)時(shí)，問題出現(xiàn)了，因?yàn)閿?shù)據(jù)在所有它們中被更新，因?yàn)榛旧希袛?shù)據(jù)在它們中的每一個(gè)中被更新，而不是讓它們僅獲取分配給它們的數(shù)據(jù)。

更新是這樣完成的:

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();

圖表是這樣實(shí)例化的:(對(duì)每個(gè)圖表使用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
            }
        }
    }
});

通過這種方式，新數(shù)據(jù)從原點(diǎn)推出，元素向右移動(dòng)產(chǎn)生時(shí)間推移效果。

我甚至不知道該嘗試什么。看到他們?nèi)齻€(gè)是獨(dú)立的，而不是共享同一個(gè)畫布，應(yīng)該使工作，對(duì)不對(duì)？另外，我在樹莓派上用這個(gè)做這個(gè):

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