如何在Angular 11项目中实现加密货币行情图表小部件

以下是适配Angular 11 + TypeScript技术栈的完整实现方案，效果对齐CoinMarketCap首页的7天迷你行情图样式：

前置依赖选型 #

直接使用ng2-charts搭配Chart.js实现，和Angular 11生态兼容度高，无需额外原生DOM适配操作。

实现步骤 #

步骤1：安装兼容版本依赖 #

Angular 11对应适配的ng2-charts版本为2.x分支，执行以下命令安装：

npm install ng2-charts@2.4.2 chart.js@2.9.4

安装完成后在你的币种列表对应功能模块中导入ChartsModule：

import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
// 你的其他组件、服务导入

@NgModule({
  imports: [
    // 其他已有模块导入
    ChartsModule
  ],
  // 你的组件声明、导出配置
})
export class YourCoinListModule { }

步骤2：封装独立的迷你图表组件 #

新建可复用的单币种行情图组件crypto-sparkline.component.ts，配置无坐标轴、带渐变填充的极简折线图样式：

import { Component, Input } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color } from 'ng2-charts';

@Component({
  selector: 'app-crypto-sparkline',
  template: `
    <canvas baseChart
      [datasets]="lineChartData"
      [labels]="lineChartLabels"
      [options]="lineChartOptions"
      [colors]="lineChartColors"
      [chartType]="'line'">
    </canvas>
  `
})
export class CryptoSparklineComponent {
  // 外部传入7天价格数组，格式为[第1天价格, 第2天价格...第7天价格]
  @Input() priceData: number[] = [];
  // 外部传入7天涨跌状态：true为上涨，false为下跌
  @Input() isRise: boolean = true;

  // 隐藏X轴标签占位
  public lineChartLabels = Array(7).fill('');
  public lineChartOptions: ChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: { display: false },
    scales: {
      xAxes: [{ display: false }],
      yAxes: [{ display: false }]
    },
    tooltips: { enabled: false },
    elements: {
      point: { radius: 0 },
      line: { tension: 0.3 }
    }
  };

  get lineChartData(): ChartDataSets[] {
    return [{ data: this.priceData, fill: true }];
  }

  get lineChartColors(): Color[] {
    const mainColor = this.isRise ? '#16c784' : '#ea3943';
    return [
      {
        borderColor: mainColor,
        backgroundColor: `${mainColor}33`, // 叠加20%透明度作为填充色
        borderWidth: 1.5
      }
    ];
  }
}

步骤3：在币种列表中插入图表 #

在你的列表「最近7天」列的循环逻辑中，直接传入对应币种的7天价格数据和涨跌状态即可：

<!-- 币种列表循环部分代码 -->
<tr *ngFor="let coin of coinList">
  <!-- 其他列：币种名称、当前价格、涨跌幅等 -->
  <td class="seven-day-chart-column">
    <app-crypto-sparkline 
      [priceData]="coin.last7DayPrices" 
      [isRise]="coin.change7d > 0"
      style="height: 32px; width: 80px;"
    ></app-crypto-sparkline>
  </td>
</tr>

效果示意 #

性能优化建议 #

• 如果单页展示币种超过50个，建议搭配Angular CDK的虚拟滚动组件CdkVirtualScrollViewport渲染列表，避免大量图表同时初始化造成页面卡顿
• 可添加懒加载逻辑，只有当图表滚动到可视区域内再初始化渲染

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