angular - 在 chart.js 中暂停水平滚动以获取实时数据
问题描述
我正在使用带有实时图表的 chart.js 插件,所以我想暂停滚动图表,但是当我动态调用 pause 时它不起作用。
pausestart:boolean;
plugins: {
streaming: {
onRefresh: function(chart: any) {
chart.data.datasets.forEach(function(dataset: any) {
dataset.data.push({
x: Date.now(),
y: Math.random()
});
});
},
duration: 12000,
refresh: 100,
delay: 1000,
frameRate: 60,
pause: this.pausestart
}
}
pausestart
单击暂停按钮后,我最初设置为 false 将其设置为 true
pause() {
this.pausestart = true;
}
start() {
this.pausestart = false;
}
我该如何解决这个问题。
解决方案
您可以获取BaseChartDirective
using @ViewChild
,然后使用chart
属性设置pause
选项并调用update()
.
import { Component, ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';
export class AppComponent {
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
pause() {
this.chart.chart.options.plugins.streaming.pause = true;
this.chart.chart.update({duration: 0});
}
start() {
this.chart.chart.options.plugins.streaming.pause = false;
this.chart.chart.update({duration: 0});
}
...
推荐阅读
- java - Spring @Service 与对象服务
- python - Django - 在 POST 请求上发送 JSON 数组
- python - 如何从外部访问类的局部变量?Python
- javascript - 仅使用 javascript 对 html 中的表格进行排序
- spring - 如何在java中上传文档列表
- spring-boot - 与 restTemplate getforObject() 一起使用时,jackson-data-format 不会转换
- jenkins-pipeline - 如何从 Jenkins 共享库运行 vars/script.groovy
- wordpress - Dokan 插件定制
- python - 根据部分匹配组合两个 pandas df
- database - wpdb->get row Select (相当复杂) 查询不起作用