使用RxJs WebSocket，HighCharts和Angular实时数据

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都会向该消息发出该消息，以更新并显示图表数据中的流。