Angular 2/4/5：如何将API数据传入Chart.js并展示带数据图表

作为Angular新手，我来帮你梳理清楚从API获取数据并在Chart.js中展示的完整流程，其实并不复杂，咱们一步步来：

首先，先修正你的ServerService——服务里不应该直接在getServers方法里订阅Observable，而是把数据流返回给组件处理，这样组件能更灵活地控制数据：

@Injectable()
export class ServerService {
  private basicUrl = 'http://10.188.16.104:8001/ws/temp';

  constructor(private http: Http) { }

  getServers(): Observable<any> {
    // 直接返回HTTP请求的Observable，把订阅逻辑交给组件
    return this.http.get(this.basicUrl)
      .pipe(
        // 提前把响应转成JSON格式，组件里直接用
        map(response => response.json())
      );
  }
}

接下来，在你的图表组件里（比如叫TempChartComponent）完成以下操作：

1. 准备依赖与注入服务 #

首先确保你装了chart.js和Angular封装的ng2-charts（用这个比直接操作原生Chart.js更省心），没装的话先跑命令：

npm install chart.js ng2-charts --save

然后在组件里引入相关模块，注入咱们的ServerService：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ServerService } from './server.service';
// 导入Chart.js相关的类型定义
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'app-temp-chart',
  templateUrl: './temp-chart.component.html',
  styleUrls: ['./temp-chart.component.css']
})
export class TempChartComponent implements OnInit, OnDestroy {
  // 图表的数据集和标签，初始为空数组
  public tempChartData: ChartDataSets[] = [
    { data: [], label: '实时温度' }
  ];
  public tempChartLabels: Label[] = [];
  
  // 图表基础配置
  public tempChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: false,
          // 可以根据温度范围调整刻度
          min: 0,
          max: 100
        }
      }]
    }
  };
  public tempChartType: ChartType = 'line'; // 用折线图展示温度变化
  public tempChartLegend = true;

  private updateTimer: any; // 用来存定时更新的定时器，避免内存泄漏

  constructor(private serverService: ServerService) { }

2. 获取数据并更新图表 #

添加方法来拉取API数据，然后更新图表的数据集：

ngOnInit(): void {
  // 页面初始化时先获取一次数据
  this.getTempData();
  // 如果需要实时更新，比如每5秒拉一次数据，就加个定时器
  this.updateTimer = setInterval(() => this.getTempData(), 5000);
}

getTempData(): void {
  this.serverService.getServers().subscribe(
    (apiData) => {
      // 把新的温度和时间数据追加到数组里
      this.tempChartData[0].data.push(apiData.temp);
      this.tempChartLabels.push(apiData.time);
    },
    (error) => {
      // 处理请求失败的情况
      console.error('获取温度数据失败:', error);
    }
  );
}

// 组件销毁时清除定时器，防止内存泄漏
ngOnDestroy(): void {
  if (this.updateTimer) {
    clearInterval(this.updateTimer);
  }
}

3. 在模板里渲染图表 #

最后在组件的HTML模板中添加ng2-charts的指令，渲染出图表：

<div class="chart-container" style="width: 80%; margin: 0 auto;">
  <canvas baseChart
          [datasets]="tempChartData"
          [labels]="tempChartLabels"
          [options]="tempChartOptions"
          [legend]="tempChartLegend"
          [chartType]="tempChartType">
  </canvas>
</div>

小提示 #

• 如果你的API是WebSocket实时推送（不是定时拉取），那得把服务里的HTTP请求改成WebSocket连接，比如用Angular的HttpClient配合WebSocket API来接收实时数据。
• 如果只需要展示单次获取的温度数据，把定时器去掉就行，只在ngOnInit里调用一次getTempData。

内容的提问来源于stack exchange，提问作者Easi Test