我在我的角度应用程序中使用highcharts-angular和highcharts作为库。我的问题是我想通过下拉菜单动态更改图表的主题。我在下拉菜单中有4个主题,我称之为ChangeTheme()函数。如果我第一次打电话给主题,它会改变。当我第二次调用相同主题时,它不会改变。我该怎么解决?
预先感谢
import { Component, OnInit } from '@angular/core';
import { Navigation } from '../models/Navigarion';
import { SessionService } from '../services/sessionservice';
import { Router } from '@angular/router';
import { Items } from '../models/Items';
import { DataService } from '../services/dataservice';
import { Url } from '../models/url';
import * as Highcharts from 'highcharts';
import theme from 'highcharts/themes/dark-unica';
import theme2 from 'highcharts/themes/sand-signika';
import theme3 from 'highcharts/themes/dark-green';
import theme4 from 'highcharts/themes/gray';
import { Report } from '../models/Reports';
import { Settings } from '../models/User';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
Highcharts: typeof Highcharts = Highcharts;
chartOptions: Highcharts.Options ;
setting:Settings;
elements:Report[]=[];
constructor(private _session:SessionService,private router: Router,private _dataService:DataService) { }
isFilter="0";
is_new=true;
navigation:Navigation[]=[];
reports:Items[]=[];
filters=[];
ngOnInit() {
this.isFilter="0";
if(this._session.getEmployee()==null){
this.router.navigate(['PA/', 'Login']);
return
}
this.setting=new Settings();
this.setting=this._session.getEmployee().SETTING;
if(this.setting.TEMA!=null){
this.ChooseGraphThema(this.setting.TEMA)
}
this.navigation=this._session.getEmployee().MENUS;
}
LoadCharts(){
this.elements=[];
this.reports=[];
var report =new Report();
report.highcharts== Highcharts;
report.chartOptions={ series: [{ data: [1, 2, 3],type: 'bar' }]};
this.elements.push(report);
report =new Report();
report.highcharts== Highcharts;
report.chartOptions={ series: [{ data: [1, 2, 3],type: 'line' }]};
this.elements.push(report);
report =new Report();
report.highcharts== Highcharts;
report.chartOptions={ series: [{ data: [1, 2, 3],type: 'pie' }]};
this.elements.push(report);
report =new Report();
report.highcharts== Highcharts;
report.chartOptions={ series: [{ data: [1, 2, 3],type: 'area' }]};
this.elements.push(report);
report =new Report();
report.highcharts== Highcharts;
report.SIZE=12;
report.chartOptions={ series: [{ data: [1, 2, 3],type: 'area' }]};
this.elements.push(report);
}
ChangeTheme(){
this.ChooseGraphThema(this.setting.TEMA);
}
ChooseGraphThema(param){
this.LoadCharts();
if(param=="thema-3d" || param=="thema-mountain"){
theme(Highcharts);
}
else if(param=="thema-nature"){
theme3(Highcharts);
}
else if(param=="thema-office"){
theme4(Highcharts);
}
else{
theme2(Highcharts);
}
}
}