9.4. Highcharts - quan1997ap/angular-app-note GitHub Wiki

<div style=" display:flex; justify-content: center; align-items: center; flex-direction: column;">
  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    [(update)]="updateFlag"
    >
  </highcharts-chart>

  <button (click)="handleUpdate()">Update chart</button>
</div>

import { Component } from '@angular/core';
import Highcharts from 'highcharts';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   Highcharts: typeof Highcharts = Highcharts;
  updateFlag = false;

  data = [1, 2, 3, 4];

  chartOptions: Highcharts.Options = {
    chart: {
      events: {
        load: function() {
          var series = this.series[0],
          last = series.data[series.data.length - 1];
          setInterval(function() {
            var p1 = Math.random() * 3;
            series.addPoint(p1);
          }, 1000)
        }
      }
    },
    series: [
      {
        type: 'line',
        data: this.data
      }
    ]
  }


  handleUpdate() {
    this.chartOptions.title =  {
      text: 'updated'
    };

    this.chartOptions.series[0] = {
      type: 'line',
      data: this.data.reverse()
    }

    this.updateFlag = true;
  }
}

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

import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HighchartsChartModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

tooltip: {
  shared: true,
  valuePrefix: '',
  valueSuffix: 'Byte',
  valueDecimals: 1
}

        yAxis: {
            min: 0,
            max: 4294967296,
            labels: {
            	formatter: function() {
                	var maxElement = this.axis.max;
                	var kb = 1024, mb = 1048576, gb = 1073741824;
                	if (maxElement > gb) {
                	  	return (this.value / gb).toFixed(1) + " GB";
                	} else if (maxElement > mb) {
	                  	return (this.value / mb).toFixed(1) + " MB";
                	} else if (maxElement > kb) {
                  		return (this.value / kb).toFixed(1) + " KB";
                	} else {
	                  return (this.value) + " B";
                	}
            	}
            },
            title: {
                text: ''
            }
        },