chart.js串流插件中的自订时间

w8ntj3qf  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(197)

我正在努力从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)
  }
};
pobjuy32

pobjuy321#

如果我已经了解了您的用例,您可能希望了解从模拟开始所经过的时间。
我认为无论如何都必须使用Date.now(),因为realtime刻度无论如何都是一个时间刻度,需要有一个时间作为x值。但是,您可以实现ticks.callback,以便在图表上显示经过的时间,而不是日期。
在下面的示例中,我假设模拟的开始时间是当前时间(Date.now())。
编辑:在@dymek662线程之后,解决方案发生了一些变化。主要变化是为了解决用例:
1.使用分笔成交点。2来源:'数据'
1.数据的日期时间都相同
1.添加“simutime”作为1个数据集的数据的附加属性
第一个

相关问题