如何用Canvas.js+Angular实现API股票数据动态绘图并清理旧数据？

1. 先装依赖 #

首先安装Canvas.js和对应的TypeScript类型定义（如果用TS开发的话）：

npm install canvasjs
npm install @types/canvasjs --save-dev

2. 组件核心实现 #

下面是完整的组件代码，包含图表初始化、API数据拉取、旧数据清除和动态更新逻辑：

import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import * as CanvasJS from 'canvasjs';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-stock-chart',
  templateUrl: './stock-chart.component.html',
  styleUrls: ['./stock-chart.component.css']
})
export class StockChartComponent implements OnInit, AfterViewInit, OnDestroy {
  private chart: CanvasJS.Chart | undefined;
  private updateTimer: any;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    // 初始化CanvasJS图表
    this.chart = new CanvasJS.Chart('stockChartBox', {
      title: { text: '实时股票走势' },
      axisX: {
        title: '时间',
        valueFormatString: 'YYYY-MM-DD HH:mm:ss',
        type: 'datetime' // 指定X轴为时间轴类型
      },
      axisY: { title: '股价(元)' },
      data: [{
        type: 'line',
        dataPoints: [] // 初始空数据容器
      }]
    });
    this.chart.render();

    // 启动定时更新（这里设为5秒一次，可根据需求调整）
    this.startAutoUpdate();
  }

  private startAutoUpdate(): void {
    this.updateTimer = setInterval(() => {
      this.refreshChartData();
    }, 5000);
  }

  private refreshChartData(): void {
    // 替换成你的真实API地址
    this.http.get<StockRecord[]>('/api/stock/latest-data').subscribe(newData => {
      if (!this.chart) return;

      // 清除旧数据：直接重置dataPoints数组，大数据量下性能最优
      this.chart.data[0].dataPoints = [];

      // 把API返回的时间戳转成CanvasJS支持的Date对象，填充新数据
      const formattedPoints = newData.map(item => ({
        x: new Date(item.timestamp),
        y: item.price
      }));

      this.chart.data[0].dataPoints.push(...formattedPoints);
      this.chart.render(); // 重新渲染图表
    });
  }

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

// 定义API返回的数据结构，根据实际接口调整
interface StockRecord {
  timestamp: number; // 毫秒级时间戳
  price: number;
}

3. 模板与样式 #

模板文件（stock-chart.component.html）：

<div id="stockChartBox" style="height: 450px; width: 100%;"></div>

样式可以根据页面布局调整容器的宽高，确保图表能正常显示。

关键细节说明 #

• 旧数据清除：直接将dataPoints置为空数组是大数据量场景下最高效的方式，避免逐个删除元素的性能损耗。
• 时间轴适配：CanvasJS的时间轴要求x值为Date对象，必须把API返回的毫秒级时间戳转换为new Date(timestamp)。
• 内存管理：组件销毁时一定要清除定时器；如果用WebSocket推送数据，也要记得在销毁时关闭连接。
• 性能优化：如果数据量过大，也可以改成只保留最近N条数据（比如最近200条），但按你的需求全量清除旧数据的话，直接重置数组就足够。

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