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",
        },
      };
    })
  }
}

步驟2

專案配置完成後；我們必須訪問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 {} 

步驟3

最後一步是通過將指令和一些屬性繫結新增到來初始化圖表資料和選項：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>

這是最終結果：
如下面的GIF所示，一旦建立連線，折線圖將獲取WebSocket URL資料。每當伺服器收到新訊息時，WebSocketSubject都會向該訊息發出該訊息，以更新並顯示圖表資料中的流。

歡迎在下面的評論部分中使用RxJs WebSocket，HighCharts和Angular與Live資料分享您的經驗。

APS幫助提升企業生產效率，真正實現生產計劃視覺化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率