Jquery ng2图表实时数据动画

我使用Angular 2和ng2图表作为需要显示实时数据的仪表板

目前，我的问题是，当我更改与图表关联的数据时，图表会重新绘制所有数据点。由于这些数据将以每秒为单位输入，这不适合我的目的

我想做一些类似于这个演示的东西：但是我没有用于highcharts的预算

我的代码如下：

组件1.ts：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common';

import { CHART_DIRECTIVES } from 'ng2-charts';

@Component({
    selector: 'my-dashboard',
    templateUrl: 'app/dashboard.component.html',
    styleUrls: ['app/dashboard.component.css'],
    directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class DashboardComponent {
    // lineChart
    public lineChartData: Array<any> = [
        { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
        { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
        { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' }
    ];
    public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
    public lineChartOptions: any = {
        responsiveAnimationDuration: 5000,
        animation: {},
        responsive: true
    };
    public lineChartColours: Array<any> = [
        { // grey
            backgroundColor: 'rgba(148,159,177,0.2)',
            borderColor: 'rgba(148,159,177,1)',
            pointBackgroundColor: 'rgba(148,159,177,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(148,159,177,0.8)'
        },
        { // dark grey
            backgroundColor: 'rgba(77,83,96,0.2)',
            borderColor: 'rgba(77,83,96,1)',
            pointBackgroundColor: 'rgba(77,83,96,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(77,83,96,1)'
        },
        { // grey
            backgroundColor: 'rgba(148,159,177,0.2)',
            borderColor: 'rgba(148,159,177,1)',
            pointBackgroundColor: 'rgba(148,159,177,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(148,159,177,0.8)'
        }
    ];
    public lineChartLegend: boolean = true;
    public lineChartType: string = 'line';

    public randomize(): void {
        let _lineChartData: Array<any> = new Array(this.lineChartData.length);
        for (let i = 0; i < this.lineChartData.length; i++) {
            _lineChartData[i] = { data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label };
            for (let j = 0; j < this.lineChartData[i].data.length; j++) {
                _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
            }
        }
        this.lineChartData = _lineChartData;
    }

    // events
    public chartClicked(e: any): void {
        console.log(e);
    }

    public chartHovered(e: any): void {
        console.log(e);
    }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router}；
从'@angular/common'导入{CORE_指令，FORM_指令，NgClass}；
从“ng2图表”导入{CHART_DIRECTIVES}；
@组成部分({
选择器：“我的仪表板”，
templateUrl:'app/dashboard.component.html'，
样式URL:['app/dashboard.component.css']，
指令：[图表指令、NgClass、核心指令、表格指令]
})
导出类仪表板组件{
//线条图
公共lineChartData:数组=[
{数据：[65,59,80,81,56,55,40]，标签：'Series A'}，
{数据：[28,48,40,19,86,27,90]，标签：'Series B'}，
{数据：[18,48,77,9100,27,40]，标签：'Series C'}
];
公共lineChartLabels:Array=['一月'、'二月'、'三月'、'四月'、'五月'、'六月'、'七月']；
公共线形图选项：任意={
响应动画持续时间：5000，
动画：{}，
回答：对
};
公共线条图颜色：数组=[
{//灰色
背景颜色：“rgba（148159177,0.2）”，
边框颜色：“rgba（148159177,1）”，
pointBackgroundColor:'rgba（148159177,1）'，
pointBorderColor:“#fff”，
pointHoverBackgroundColor:“#fff”，
pointHoverBorderColor:'rgba（148159177,0.8）'
},
{//深灰色
背景颜色：“rgba（77,83,96,0.2）”，
边框颜色：“rgba（77,83,96,1）”，
pointBackgroundColor:'rgba（77,83,96,1）'，
pointBorderColor:“#fff”，
pointHoverBackgroundColor:“#fff”，
pointHoverBorderColor:'rgba（77,83,96,1）'
},
{//灰色
背景颜色：“rgba（148159177,0.2）”，
边框颜色：“rgba（148159177,1）”，
pointBackgroundColor:'rgba（148159177,1）'，
pointBorderColor:“#fff”，
pointHoverBackgroundColor:“#fff”，
pointHoverBorderColor:'rgba（148159177,0.8）'
}
];
公共线形图表图例：布尔值=真；
公共lineChartType:string='line'；
public randomize（）：void{
让_lineChartData:Array=新数组（this.lineChartData.length）；
for（设i=0；i

component.html：

<div class="row">
    <div class="col-md-6">
        <base-chart class="chart"
                    [datasets]="lineChartData"
                    [labels]="lineChartLabels"
                    [options]="lineChartOptions"
                    [colors]="lineChartColours"
                    [legend]="lineChartLegend"
                    [chartType]="lineChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"></base-chart>
    </div>
    <div class="col-md-6" style="margin-bottom: 10px;">
        <button class="btn btn-default" (click)="randomize()">Randomize Data</button>
    </div>
</div>

随机化数据

---

有人知道我如何在数据更改时使其平滑动画化，而不是重新绘制整个图形吗？

您可以尝试为新数据实现一种推送方法，如下所示：

public pushOne(): void {
    this.lineChartData.forEach((x, i) => {
      const num = this.generateNumber(i);
      const data: number[] = x.data as number[];
      data.push(num);
    });
    this.lineChartLabels.push(`Label ${this.lineChartLabels.length}`);
  }

您还可以使用@ViewChild装饰器以编程方式控制图表的渲染（或未渲染）部分：

@ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;