1. 在组件中使用 BehaviorSubject 控制数据源，并注册订阅以获取更新

import { Component, OnInit } from '@angular/core'; import { BehaviorSubject } from 'rxjs';

@Component({ selector: 'app-chart', templateUrl: './chart.component.html', styleUrls: ['./chart.component.css'] }) export class ChartComponent implements OnInit {

chartData = new BehaviorSubject<[string, number][]>([]); chartOptions = { /* 根据需求配置相关参数 */ };

constructor() { }

ngOnInit() { this.getData(true); // 初始化获取数据 }

getData(update: boolean) { // 获取数据并更新 BehaviorSubject this.chartData.next(/* 获取的数据 */); if (update) { this.chartData.subscribe((data) => { // 更新 Highcharts 显示数据 this.chartOptions.series[0].data = data; }); } }

}

2. 在 html 模板中使用 async 管道绑定数据

3. 在切换按钮事件中调用 getData 实现数据更新

切换