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

點(diǎn)擊下載Highcharts最新試用版

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

備注

在本文中，使用隨機(jī)數(shù)據(jù)來更新圖表。沒有服務(wù)器端代碼的實(shí)現(xiàn)。

創(chuàng)建此項(xiàng)目有兩個主要部分：

第一部分是設(shè)置Angular項(xiàng)目。為此，請遵循此Angular指南中的標(biāo)準(zhǔn)說明：設(shè)置本地環(huán)境和工作區(qū)。

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

由于我們將使用默認(rèn)協(xié)議WSS（WebSocket協(xié)議），因此配置項(xiàng)目中的第一步是WebSocket import {webSocket}從rxjs/webSocket包中導(dǎo)入。
順便說一句，如果你不熟悉WSS，這里是當(dāng)有訂閱的插座會發(fā)生什么的簡短說明：
該rxjs管是用于撰寫運(yùn)營商的方法。訂閱時收到的Emitted值僅被推入數(shù)組中并分配給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",
        },
      };
    })
  }
}

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

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

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 {} 

最后一步是通過將指令和一些屬性綁定添加到來初始化圖表數(shù)據(jù)和選項(xiàng)：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>