我想要多個 vue-chart.js 圖，每個圖每 5 秒重繪 一次（添加一個新資料點）。值來自傳感器，并通過道具傳遞（我正在為節點紅色應用程式撰寫 UI，我認為這與問題無關）。
我設法讓一張圖完美地作業，但是如果我放置 2 個圖，傳遞的值會同時顯示在兩個圖中（不僅僅是在一個圖中，應該顯示它們）。
在這里親自查看作業 CodeSandBox 演示
讓我感到困惑的是， console.log(this.myChart)inadddata顯示“正確”的圖形（不同id，不同context）。我想我已經創建了單獨的圖形實體，但仍然無法僅向其中一個添加資料。
我不經常使用 vue，我可能會遺漏一些重要的東西。謝謝！
成分 Test.vue
<template>
<div>
<canvas :id="name"></canvas>
</div>
</template>
<script>
import Chart from "chart.js";
const chartSetting = {
type: "line",
data: {
datasets: [
{
label: "setpoint",
data: [],
borderColor: "blue",
borderWidth: 3,
},
],
},
options: {},
};
let interval;
export default {
name: "test",
data() {
return {
myChart: null,
chartSetting: chartSetting,
};
},
props: ["id", "name", "setpoint"],
methods: {
adddata(setpoint, time) {
this.myChart.data.datasets[0].data.push(setpoint);
this.myChart.data.labels.push(time);
this.myChart.update();
console.log(`now printing ${setpoint} to this graph:`);
console.log(this.myChart);
},
createChart(chartId, chardData) {
const ctx = document.getElementById(chartId);
// Save reference
this.myChart = new Chart(ctx, {
type: chardData.type,
data: chardData.data,
options: chardData.options,
});
interval = setInterval(() => {
let date = new Date();
let seconds = date.getSeconds();
this.adddata(this.setpoint, seconds);
}, 5000);
},
},
mounted() {
this.createChart(this.name, this.chartSetting);
},
};
</script>
應用程式
<template>
<div id="app">
<p>
graphs get new data from 2 different sensors every 5 seconds. Here
simulated as "6" and "3"
</p>
<h3>this graph should only show 6</h3>
<test name="grap1" id="1" setpoint="6" />
<h3>this graph should only show 3</h3>
<test name="grap2" id="2" setpoint="3" />
</div>
</template>
<script>
import Test from "./components/Test";
export default {
name: "App",
components: {
Test,
},
};
</script>
uj5u.com熱心網友回復：
chartSetting object 對所有組件實體都是相同的，因為它在評估組件模塊時定義一次。
data工廠函式的原因是它為每個實體回傳一個新的資料物件，而不是在實體之間共享。
它應該是：
data() {
const chartSetting = ...
return {
myChart: null,
chartSetting: chartSetting,
};
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/328315.html
標籤：javascript Vue.js vue-chartjs
下一篇：如何檢查購物車中每個產品的庫存