带下拉菜单的动态更改角度主题

时间:2019-07-19 06:30:11

标签: angular highcharts themes

我在我的角度应用程序中使用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);
    } 
  }

}

0 个答案:

没有答案