export class ChartComponent implements OnInit, OnDestroy {
public chart: AmChart;
chartData1 = [];
subscription: Subscription;
public tokenName: any;
data: any;
changeGraph:any;
lineColor1='#682382';
fillColorField1='#682382';
fillColors1='#682382';
negativeLineColor1='#682382';
negativeFillolors='#682382';
themeType = "light";
constructor(private AmCharts: AmChartsService, private chartservice: ChartService, readonly switchThemeService:SwitchThemeService) {
console.log('chartService', this.AmCharts.charts);
this.subscription = this.switchThemeService.getTheme().subscribe(message => { this.changeGraph = message;
if(this.changeGraph === undefined){
this.lineColor1='#682382';
this. fillColorField1='#682382';
this.fillColors1='#682382';
this.negativeLineColor1='#682382';
this.negativeFillolors='#682382';
this.themeType = "light";
}else{
if(this.changeGraph.theme === true){
this.lineColor1 = '#ffedc6';
this.fillColorField1 = '#ffedc6';
this.fillColors1 = '#ffedc6';
this.negativeFillolors = '#ffedc6';
this.negativeLineColor1 = '#ffedc6';
this.themeType = "dark";
}else{
this.lineColor1='#682382';
this. fillColorField1='#682382';
this.fillColors1='#682382';
this.negativeLineColor1='#682382';
this.negativeFillolors='#682382';
this.themeType = "light";
}
}
});
}
ngOnInit() {
this.getChartData();
console.log('chart', this.chart);
this.chartservice.getMinData( this.tokenName);
}
getChartData() {
this.subscription = this.chartservice.chartData$.subscribe(
item => {
this.data = item;
console.log('item', item);
this.generateChartData();
});
this.subscription = this.chartservice.tokenName$.subscribe(
item => {
this.tokenName = item;
}
);
}
generateChart() {
this.chart = this.AmCharts.makeChart('chartdiv', {
'type': 'stock',
'theme': this.themeType,
'categoryAxesSettings': {
'minPeriod': 'mm'
},
'dataSets': [{
'title': this.tokenName,
'fieldMappings': [{
'fromField': 'value',
'toField': 'value'
}, {
'fromField': 'volume',
'toField': 'volume'
}],
'dataProvider': this.chartData1,
'categoryField': 'date'
}
],
'panels': [{
'showCategoryAxis': false,
'title': 'Value',
'percentHeight': 70,
'categoryAxis': {
'gridThickness': 0
},
'stockGraphs': [{
'id': 'g1',
'valueField': 'value',
'lineColor': this.lineColor1,
'fillColorsField': this.fillColorField1,
'useDataSetColors': false,
'fillAlphas': 0.4,
'comparable': true,
'compareField': 'value',
'balloonText': '[[title]]:<b>[[value]]</b>',
'compareGraphBalloonText': '[[title]]:<b>[[value]]</b>'
}],
'stockLegend': {
'periodValueTextComparing': '[[percents.value.close]]%',
'periodValueTextRegular': '[[value.close]]'
}
}, {
'title': 'Volume',
'percentHeight': 45,
'marginLeft': 10,
'columnWidth': 0.4,
'categoryAxis': {
'gridThickness': 0
},
'stockGraphs': [{
'valueField': 'volume',
'type': 'column',
'showBalloon': false,
'fillAlphas': 1,
'lineColor': this.lineColor1,
'fillColors': this.fillColors1,
'negativeLineColor':this.negativeLineColor1,
'negativeFillColors':this.negativeFillolors,
'useDataSetColors': false,
'compareGraphBalloonText': '[[title]]:<b>[[volume]]</b>'
}],
'stockLegend': {
'periodValueTextRegular': '[[value.close]]'
}
}],
'chartScrollbarSettings': {
'enabled': false,
'graph': 'g1'
},
'chartCursorSettings': {
'valueBalloonsEnabled': true,
},
});
}
generateChartData() {
if (this.data) {
this.chartData1 = [];
let temp = this.data.Data;
let finalLength = this.data.Data.length;
for (let i = 0; i < temp.length; i++) {
this.chartData1.push({
'date': new Date(temp[i].time * 1000),
'value': temp[i].close,
'volume': temp[i].volumefrom
});
if (finalLength === this.chartData1.length) {
this.generateChart();
}
}
}
}
ngOnDestroy() {
// this.subscription.unsubscribe();
}
}
嗨,这是我的图表组件,其中生成并呈现图表我使用服务从另一个组件获取值并更新图表的颜色,现在问题是DOM没有立即更新它&#39 ;只有当我去任何其他路线并且回来时它才会更新。有人可以帮我弄这个吗?