如何为此图表(实时数据)添加服务和可观察到的捕获?

时间:2019-02-18 12:19:08

标签: angular highcharts

live Demo我需要为此图表添加服务和Observable catch,因为该图表是实时数据,并且发现浏览器处于阻塞状态,api time-rows.json继续在控制台日志中运行(网络)。

import { Component, OnInit, OnDestroy } from "@angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";
declare var require: any;
require("highcharts/modules/data")(Highcharts);

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

@Component({
  selector: "app-chart",
  templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit, OnDestroy {
  constructor() {}

  ngOnInit() {
    Highcharts.chart("container", {
      chart: {
        type: "spline"
      },
      title: {
        text: "Live Data (Rows JSON)"
      },

      subtitle: {
        text: "Data input from a remote JSON file"
      },

      data: {
        rowsURL: "https://demo-live-data.highcharts.com/time-rows.json",
        firstRowAsNames: false,
        enablePolling: true
      }
    });
  }

  ngOnDestroy() {}
}
<div
  id="container"
  style="min-width: 310px; height: 400px; margin: 0 auto"
></div>

0 个答案:

没有答案