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>