Question

我正在尝试将3张图表从静态图表更改为动态图表。我希望他们每5秒读取一个数据点，但无法弄清楚如何正确使用间隔。

我正在从别人那里接过这个职位，在此之前从未做过棱角分明的项目。

我试图弄清楚如何设置间隔，但不确定应该去哪里。我已经尝试在ngOnInit（）中放置setInterval 周围的管道，但我做错了。现在，我已经尝试了从'rxjs'库的时间间隔。我尝试过的所有内容都给了我一个空白图表，而不是动态图表或错误。图表正确显示了所有数据，只是无法弄清楚如何一次绘制一个而不是一次绘制。

    import { Observable } from 'rxjs';
    import { interval } from 'rxjs';

      ngOnInit() {
 this.DataService.Data$.pipe(untilDestroyed(this)).interval(5000).subscribe(data => {
          this.participantsData$ = this.DataService.combineChartData$([
            this.DataService.getChartData(data, 'Peers', {
            label: 'Peers',
            backgroundColor: 'black',
           }),

我希望该间隔每5秒一次从JSON对象绘制一个值。

在我的课堂上，我有这样的Observable：

participantsData$: Observable<ChartData>;
  participantsOptions: LineChartWidgetOptions = {
    ...this.defaultChartOptions,
    title: 'Participants',
  };

对于上面我写的内容，我得到此错误：

error TS2339: Property 'interval' does not exist on type 'Observable<any>'.

我也尝试延迟，但收到相同的错误。据我了解，Interval是一种静态方法，我不能以这种方式使用它，但是delay为什么不起作用？如果需要，我可以提供更多代码，但我想我只是不了解可观察的工作方式或管道和订阅工作方式的基本知识。

任何指向正确方向的指针都很棒！

编辑以添加更多信息，这在我的service.ts中：

combineChartData(chartData: ChartData[]): ChartData {
    const labels = flatMap(chartData, (value, index, collection) => {
      return value['labels'];
    });

    const dataSets = flatMap(chartData, (value, index, collection) => {
      return value['datasets'];
    });

    const result = {
      labels: uniqWith(labels, isEqual),
      datasets: dataSets,
    } as ChartData;

    return result;
  }


  combineChartData$(chartData: ChartData[]): Observable<ChartData> {

     const chartDataOnDelay = of(this.combineChartData(chartData));
     //chartDataOnDelay;
     return chartDataOnDelay;
  }

Answer 1

如果要以特定的时间间隔重复读取端点，实际上是相反的方式

import {interval} from 'rxjs'
interval(5000).pipe(switchMap(()=>this.DataService.Data$)).subscribe(console.log)

使用Chart.js使JSON文件中的折线图动态化

1 个答案: