javascript - (Angular Ionic)如何使用 chartjs-plugin-streaming 流式传输我的自定义数据?
问题描述
我正在尝试使用 chart.js 和 chartjs-plugin-streaming 将数据流式传输到画布中。它使用随机数据完美地工作。但是如何流式传输我的自定义数据?
流式传输随机数据效果很好(每 2 秒更新一次)。
tab1.page.html
<div>
<canvas
baseChart
[chartType]="'line'"
[datasets]="datasets"
[options]="options">
</canvas>
</div>
tab2.page.ts
import { Component } from '@angular/core';
import 'chartjs-plugin-streaming';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
datasets: any[] = [{
data: []
}, {
data: []
}];
options: any = {
scales: {
xAxes: [{
type: 'realtime',
realtime: {
onRefresh: function(chart: any) {
chart.data.datasets.forEach(function(dataset: any) {
dataset.data.push({
x: Date.now(),
y: Math.random() * 100
});
});
},
delay: 2000
}
}],
yAxes: [{
ticks: {
max:100,
min:0
}
}]
}
};
}
但是当我尝试流式传输我的数据时,它会抛出一个错误说
ERROR TypeError: Cannot read property 'myDataFromServer' of undefined
这是我的自定义代码,需要您的评论。
import { Component } from '@angular/core';
import 'chartjs-plugin-streaming';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
myDataFromServer:number;
updateMyDataFromServerFunction:any;
datasets: any[] = [{
data: []
}, {
data: []
}];
options: any = {
scales: {
xAxes: [{
type: 'realtime',
realtime: {
onRefresh: function(chart: any) {
chart.data.datasets.forEach(function(dataset: any) {
dataset.data.push({
x: Date.now(),
y:this.myDataFromServer
});
});
},
delay: 2000
}
}],
yAxes: [{
ticks: {
max:100,
min:0
}
}]
}
};
constructor(
) {}
ngOnInit(){
this.updateMyDataFromServer()
}
updateMyDataFromServer(){
console.log('updateMyDataFromServer() called');
this.updateMyDataFromServerFunction = setInterval(() => {
this.myDataFromServer = Math.random() * 100
},1000)
}
}
解决方案
让我为有同样问题的人回答我的问题。
它适用于以下代码。谢谢。
- 我在 ngOnInit() 函数中设置选项值。
- 我使用箭头函数而不是 function(){}。
import { Component } from '@angular/core';
import 'chartjs-plugin-streaming';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
myDataFromServer:number=20;
updateMyDataFromServerFunction:any;
datasets: any[] = [{
data: []
}, {
data: []
}];
options: any;
constructor( ) {}
ngOnInit(){
this.options= {
scales: {
xAxes: [{
type: 'realtime',
realtime: {
onRefresh: (chart: any) =>{
chart.data.datasets.forEach((dataset: any) => {
dataset.data.push({
x: Date.now(),
y:this.myDataFromServer
});
});
},
delay: 2000
}
}],
yAxes: [{
ticks: {
max:100,
min:0
}
}]
}
};
this.updateMyDataFromServer();
}
updateMyDataFromServer(){
console.log('updateMyDataFromServer() called');
this.updateMyDataFromServerFunction = setInterval(() => {
console.log('called');
this.myDataFromServer = Math.random() * 100;
console.log(this.myDataFromServer,'this.myDataFromServer');
},1000)
}
}
推荐阅读
- mysql - 在 Sequelize 中使用 MySQL FIELD 函数
- python-3.x - 如何将多个.py文件转换成.exe并依次运行?
- python - 在 Django 项目中安装 python 模块
- machine-learning - 为带字幕的食物数据集生成字幕
- raku - 如何在“raku -n”迭代期间获取当前行号?
- python - Python,在图像中查找圆圈
- genexus - 提交到 Genexus 服务器的问题
- c# - 如何从excel复制特定的工作表名称并将其保存到新位置?使用 C#
- javascript - exec() 方法永远不会使用某些正则表达式返回 null
- laravel - Laravel 要求存在间接关系