Pause horizontal scrolling in chart.js for real time data

心不动则不痛 提交于 2020-12-13 12:05:05

问题


I am working on chart.js plugin with real time chart so i want to pause scrolling chart but when i calling pause dynamically its not working.

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
        }
      }

i am setting pausestartinitially false after click on pause button set it to true

pause() {
    this.pausestart = true;
  }

  start() {
    this.pausestart = false;
  }

how can i resolve this issue.


回答1:


You can get a BaseChartDirective using @ViewChild, then use the chart property to set the pause option and call 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});
  }

  ...


来源:https://stackoverflow.com/questions/51078798/pause-horizontal-scrolling-in-chart-js-for-real-time-data

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!