highcharts 如何更新highchart的主题

q9rjltbz  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(306)

我有一个如下代码,它允许我在亮和暗之间切换highchart的主题,但它没有得到更新。主题只有在刷新页面后才切换。有没有办法做到这一点,而不刷新它?

ngAfterViewInit(){
    Highcharts.setOptions(getOptions(this.isLightTheme ? ThemeName.PROFESSIONAL_LIGHT: ThemeName.PROFESSIONAL_DARK));
}
jjhzyzn0

jjhzyzn01#

您需要重新创建图表以应用Highcharts.setOptions主题更改。在Angular中执行此操作的最简单解决方案似乎是两个highcharts-chart组件的条件渲染。示例:
于飞:

<div>
  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    *ngIf="isLightTheme;"
    >
  </highcharts-chart>

  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    *ngIf="!isLightTheme;"
    >
  </highcharts-chart>

  <button (click)="changeTheme()">Change theme</button>
</div>

组成部分:

Highcharts.setOptions(theme2);

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  isLightTheme = true;

  chartOptions: Highcharts.Options = {...};

  changeTheme() {
    Highcharts.setOptions(this.isLightTheme ? theme1 : theme2);
    this.isLightTheme = !this.isLightTheme;
  }
}

现场演示:https://stackblitz.com/edit/highcharts-angular-update-optimal-way-qge3vg?file=src/app/app.component.ts
**文档:**github.com/highcharts/highcharts-angular#readme

相关问题