Angular 高角度动态更新
我想用下面订阅的Angular 高角度动态更新,angular,angular2-highcharts,Angular,Angular2 Highcharts,我想用下面订阅的Observable中的值更新Highcharts量表，但我不知道如何输入系列：数据：[]值。我看过highchart示例，但它们都有静态数据。我找不到任何清晰的角度文档或好的角度示例可供学习。我非常感谢你的帮助。以下是我的ts文件源代码： import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core'; import { AuthService } from '../
Observable系列：数据：[]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°'
}
}]
});
}
}
获取对图表对象的引用
chart = Highcharts.chart(... someconfig);
chart.series[0].update({
pointStart: newSeries[0].pointStart,
data: newSeries[0].data
}, true); //true / false to redraw
"dependencies": {
"highcharts": "^6.0.3", //if you are using angular6
"@types/node": "^10.1.3"
}
<div #chart></div>
<button (click)="setGuageValue(100)">Set value to 100</button>
<button (click)="setGuageValue(160)">Set value to 160</button>
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"types": ["node"],
"typeRoots": [
"node_modules/@types"
]
},
在我的代码示例中，您能帮助我理解这些内容吗？我会为图表配置JSON元素创建一个“const someconfig”变量吗。。。那么如何将'data:'设置为我的'this.TT'变量。谢谢你的帮助help@DBrianBeardmore添加了fiddle并使用了您的配置我无法获取参考集<代码>图表=…抛出一个
错误引用错误：图表未定义。// 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]);
}
}
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"types": ["node"],
"typeRoots": [
"node_modules/@types"
]
},