Highcharts Угловое динамическое обновление

Question

Я хочу обновить свой индикатор Highcharts значением из моей подписки Observable ниже, но я не могу понять, как подать значение series: data: []. Я посмотрел на примеры с высокими диаграммами, но все они содержат статические данные. Я не могу найти какую-либо ясную документацию Angular или хороший пример Angular для изучения. Буду признателен за любую помощь. Вот мой исходный код файла ts:

import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';
import { AuthService } from '../../../../services/auth.service';
import { TempsService } from '../../../shared/temps.service';
import { Temps } from '../../../shared/temps.model';
import More from 'highcharts/highcharts-more';
import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';

More(Highcharts);

@Component({
selector: 'app-gauge',
styleUrls: [ './gauge.component.css'],
templateUrl: './gauge.component.html'
})

export class GaugeComponent implements AfterViewInit, OnInit {

private controller: string;
TT: number;

@ViewChild('container', { read: ElementRef }) container: ElementRef;

constructor(private tempsService: TempsService, public authService: AuthService) { }

ngOnInit() {

this.authService.isLoginSubject.subscribe((photon) => {
  console.log(photon + ' is registered controller in gauge.component');
  this.controller = photon;
});

}

ngAfterViewInit() {

  this.tempsService.getGaugeTemps(this.controller);

if (this.tempsService.currentSubjectTT != null) {
  this.tempsService.currentSubjectTT.subscribe((tt) => {
    console.log('Target Temp is: ' + tt);
    this.TT = tt;
    // I WANT TO UPDATE THE GAUGE HERE...WITH THE VALUE IN this.TT
  });
}

    Highcharts.chart(this.container.nativeElement, {

      credits: {enabled: false},

      plotOptions: {
        gauge: {
          dataLabels: {
            padding: 80,
            borderWidth: 0,
            style: {
              fontSize: '30px'
            }
          }
        }
      },

      chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,
        margin: [0, 0, 0, 0],
        spacingTop: 0,
      },

      title: {
        text: null
      },

      pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
          backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
              [0, '#FFF'],
              [1, '#333']
            ]
          },
            borderWidth: 0,
            outerRadius: '109%'
        }, {
          backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
              stops: [
                [0, '#333'],
                [1, '#FFF']
              ]
            },
            borderWidth: 1,
            outerRadius: '107%'
        }, {
            // default background
        }, {
           backgroundColor: '#DDD',
           borderWidth: 0,
           outerRadius: '105%',
           innerRadius: '103%'
        }]
      },

      // the value axis
      yAxis: {
          min: 0,
          max: 500,
          minorTickInterval: 'auto',
          minorTickWidth: 1,
          minorTickLength: 10,
          minorTickPosition: 'inside',
          minorTickColor: '#666',
          tickPixelInterval: 30,
          tickWidth: 2,
          tickPosition: 'inside',
          tickLength: 15,
          tickColor: '#666',
          labels: {
              step: 4,
              rotation: 'auto'
          },
          title: {
              text: 'F°'
          },
          plotBands: [{
              from: 0,
              to: 150,
              color: '#C0C0C0' // gray
          }, {
              from: 151,
              to: 225,
              color: '#55BF3B' // green
          }, {
              from: 226,
              to: 300,
              color: '#DDDF0D' // yellow
          }, {
              from: 301,
              to: 500,
              color: '#DF5353' // red
          }]
      },

      series: [{
          name: 'Grill',
          data: [0],
          tooltip: {
              valueSuffix: ' F°'
          }
      }]
    });

  }

}

Answer 1

Получить ссылку на объект диаграммы

chart = Highcharts.chart(... someconfig);

Когда вы получаете данные с сервера, просто обновите серию и перерисовайте диаграмму

chart.series[0].update({
    pointStart: newSeries[0].pointStart,
    data: newSeries[0].data
}, true); //true / false to redraw

или

updateData() {
  chart.series[0].setData([100]);
}

скрипка

Обновление для угловых

Package.json

в package.json добавлены ниже зависимости

"dependencies": {    
    "highcharts": "^6.0.3", //if you are using angular6
    "@types/node": "^10.1.3"
  }

HTML

<div #chart></div>
<button (click)="setGuageValue(100)">Set value to 100</button>
<button (click)="setGuageValue(160)">Set value to 160</button>

Компонент

нам нужно включить ниже из старшей диаграммы

// tslint:disable-next-line:no-var-requires
const Highcharts = require('highcharts/highstock');
// tslint:disable-next-line:no-var-requires
require('highcharts/highmaps');
require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);

export class ChartComponent implements AfterViewInit {
  @ViewChild('chart') public chartElement: ElementRef;
  private chart;

  configuration = {

    credits: {enabled: false},

    plotOptions: {
      gauge: {
        dataLabels: {
          padding: 80,
          borderWidth: 0,
          style: {
            fontSize: '30px'
          }
        }
      }
    },

    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false,
      margin: [0, 0, 0, 0],
      spacingTop: 0,
    },

    title: {
      text: null
    },

    pane: {
      startAngle: -150,
      endAngle: 150,
      background: [{
        backgroundColor: {
          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
          stops: [
            [0, '#FFF'],
            [1, '#333']
          ]
        },
          borderWidth: 0,
          outerRadius: '109%'
      }, {
        backgroundColor: {
          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
              [0, '#333'],
              [1, '#FFF']
            ]
          },
          borderWidth: 1,
          outerRadius: '107%'
      }, {
          // default background
      }, {
         backgroundColor: '#DDD',
         borderWidth: 0,
         outerRadius: '105%',
         innerRadius: '103%'
      }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 500,
        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',
        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 15,
        tickColor: '#666',
        labels: {
            step: 4,
            rotation: 'auto'
        },
        title: {
            text: 'F°'
        },
        plotBands: [{
            from: 0,
            to: 150,
            color: '#C0C0C0' // gray
        }, {
            from: 151,
            to: 225,
            color: '#55BF3B' // green
        }, {
            from: 226,
            to: 300,
            color: '#DDDF0D' // yellow
        }, {
            from: 301,
            to: 500,
            color: '#DF5353' // red
        }]
    },

    series: [{
        name: 'Grill',
        data: [0],
        tooltip: {
            valueSuffix: ' F°'
        }
    }]
  };

  ngAfterViewInit(): void {
    this.highchartsShow();
  }

  highchartsShow() {
    this.configuration.chart['renderTo'] = this.chartElement.nativeElement;
    this.chart = Highcharts.chart(this.configuration);
  }

  setGuageValue(value: number) {
    this.chart.series[0].setData([value]);
  }
}

для использования require в коде машинописи добавьте типы и typeRoots в tsconfig.app.json

"compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["node"],
    "typeRoots": [
      "node_modules/@types"
    ]
  },