如何更新highchart的主题

Question

我有以下代码可以让我在明暗之间切换 highchart 的主题，但它没有得到更新。主题仅在刷新页面后切换。有没有办法在不刷新的情况下做到这一点？

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

Answer 1

您需要重新创建图表才能应用 Highcharts.setOptions 主题更改。 Angular 中最简单的解决方案似乎是两个 highcharts-chart 组件的条件渲染。示例：

HTML:

<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

文档： https://github.com/highcharts/highcharts-angular#readme

如何更新highchart的主题

How to update the theme of highchart

themes

highcharts

typescript

angular