我正在努力从chart.js的流插件中更改默认实时。我只需要“移动图表”,每1秒刷新一次数据,并在X轴和Y轴上显示我的数据。
My chart
最后我想显示模拟时间从simulink模型在秒。我有实际的时间在我的vuex,所以只需要以某种方式转换实时到时间从模拟。
simuTime() {
return this.$store.getters.simulationTime
}
},
mounted() {
const ctx = this.$refs.mychart
const data = {
labels: [],
datasets: [
{
label: "Mains_1_Voltage",
data: [],
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
},
{
label: "Mains_1_Frequency",
data: [],
backgroundColor: "rgba(248, 109, 181, 1)",
borderColor: "rgba(163, 109, 181, 1)",
borderWidth: 1,
},
],
}
var config = {
type: "line",
data: data,
options: {
scales: {
x: {
type: 'realtime',
realtime: {
delay: 1000,
onRefresh: chart => {
chart.data.datasets[0].data.push({
//this doesn't work after changing from Date.now()
x: this.simuTime,
y: this.V1[0].value
})
chart.data.datasets[1].data.push({
//this doesn't work after changing from Date.now()
x: this.simuTime,
y: this.F1[0].value
})
}
}
},
y: {
beginAtZero: true,
},
},
},
}
const myChart = new Chart(ctx, config);
myChart
this.simu_time_interval = setInterval(() => {
this.$store.dispatch('calculateSimulationTime')
}, 500);
},
beforeUnmount() {
clearInterval(this.simu_time_interval)
}
};
1条答案
按热度按时间pobjuy321#
如果我已经了解了您的用例,您可能希望了解从模拟开始所经过的时间。
我认为无论如何都必须使用
Date.now()
,因为realtime
刻度无论如何都是一个时间刻度,需要有一个时间作为x值。但是,您可以实现ticks.callback
,以便在图表上显示经过的时间,而不是日期。在下面的示例中,我假设模拟的开始时间是当前时间(
Date.now()
)。编辑:在@dymek662线程之后,解决方案发生了一些变化。主要变化是为了解决用例:
1.使用分笔成交点。2来源:'数据'
1.数据的日期时间都相同
1.添加“simutime”作为1个数据集的数据的附加属性
第一个