Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

在本教程中，我們將向您展示如何使用RxJs Websocket和官方的Highcharts Angular包裝器可視化實時更新。您可以通過單擊此GitHub鏈接訪問整個項目。

備注

在本文中，使用隨機數據來更新圖表。沒有服務器端代碼的實現。

創建此項目有兩個主要部分：

第一部分是設置Angular項目。為此，請遵循此Angular指南中的標準說明：設置本地環境和工作區。

第二部分是通過以下三個簡單步驟來使用RxJsWebSocket和Highcharts設置Angular項目：
步驟1

由于我們將使用默認協議WSS（WebSocket協議），因此配置項目中的第一步是WebSocket import {webSocket}從rxjs/webSocket包中導入。
順便說一句，如果你不熟悉WSS，這里是當有訂閱的插座會發生什么的簡短說明：
該rxjs管是用于撰寫運營商的方法。訂閱時收到的Emitted值僅被推入數組中并分配給data屬性，該屬性是chartoptionin中的一部分app.component.ts。

import {
  Component,
  OnInit
} from '@angular/core';
import * as Highcharts from 'highcharts';
import {
  webSocket
} from 'rxjs/webSocket';
import {
  of ,
  Subscription
} from 'rxjs';
import {
  concatMap,
  delay
} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular-RxJsWebSocket-HighCharts';
  rate: any;
  rate$: Subscription;
  Highcharts: typeof Highcharts = Highcharts;
  chardata: any[] = [];
  chartOptions: any;
  subject = webSocket('wss://ws.coincap.io/prices?assets=bitcoin')
  ngOnInit() {
    this.rate = this.subject.pipe(
      concatMap(item => of (item).pipe(delay(1000)))
    ).subscribe(data => {
      this.rate = data;
      this.chardata.push(Number(this.rate.bitcoin))
      this.chartOptions = {
        series: [{
          data: this.chardata,
        }, ],
        chart: {
          type: "line",
          zoomType: 'x'
        },
        title: {
          text: "linechart",
        },
      };
    })
  }
}

項目配置完成后；我們必須訪問Highcharts庫以可視化數據更新。為此，我們必須包括官方的Highcharts Angular包裝器（highcharts-angular），然后導入Highcarts模塊：

• 要安裝highcharts-angularHighcharts庫，請運行以下指令：npm install highcharts-angular highcharts。
• 要導入軟件包，請轉到app.module.ts文件，然后HighchartsChartModule從highcharts-angular軟件包中導入模塊。

import {
  BrowserModule
} from '@angular/platform-browser';
import {
  NgModule
} from '@angular/core';

import {
  AppRoutingModule
} from './app-routing.module';
import {
  AppComponent
} from './app.component';
import {
  HighchartsChartModuleHighchartsChartModule
} from 'highcharts-angular';} from 'highcharts-angular';
import {import {
  HttpClientModuleHttpClientModule
} from '@angular/common/http';} from '@angular/common/http';

@NgModule({@NgModule({
  declarations: [: [
    AppComponentAppComponent
  ],],
  imports: [: [
    BrowserModule,BrowserModule,
    AppRoutingModule,AppRoutingModule,
    HttpClientModule,HttpClientModule,
    HighchartsChartModuleHighchartsChartModule
  ],],
  providers: [],: [],
  bootstrap: [AppComponent]: [AppComponent]
})})
export class AppModule {}export class AppModule {} 

最后一步是通過將指令和一些屬性綁定添加到來初始化圖表數據和選項：highcharts-chartapp.component.html

<highcharts-chart *ngIf="chartOptions" *ngIf="chartOptions"
  [Highcharts]="Highcharts"Highcharts]="Highcharts"
  [options]="chartOptions"options]="chartOptions"
  style="width: 100%; height: 400px; display: block;"style="width: 100%; height: 400px; display: block;"
></highcharts-chart>></highcharts-chart>