Angular项目集成chartjs-plugin-trendline编译报错求助

1. 修复导入报错问题 #

你遇到的export =报错是因为插件采用CommonJS模块规范导出，TypeScript需要启用合成默认导入支持：

• 打开项目根目录的tsconfig.json，添加/修改以下配置：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

这两个配置配合使用，能让TypeScript正确识别CommonJS模块的默认导出。

2. 正确导入并注册插件 #

在需要使用图表的组件（或全局配置文件）中完成插件的导入与注册：

import { Component, OnInit } from '@angular/core';
import { Chart, registerables } from 'chart.js';
import TrendlinePlugin from 'chartjs-plugin-trendline';

// 先注册Chart.js核心组件，再注册趋势线插件
Chart.register(...registerables, TrendlinePlugin);

@Component({
  selector: 'app-chart-demo',
  templateUrl: './chart-demo.component.html',
  styleUrls: ['./chart-demo.component.css']
})
export class ChartDemoComponent implements OnInit {
  chart: Chart | undefined;

  ngOnInit(): void {
    this.initChart();
  }

  initChart(): void {
    const ctx = document.getElementById('myChart') as HTMLCanvasElement;
    this.chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        datasets: [
          {
            label: 'Sales',
            data: [12, 19, 3, 5, 2],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1,
            // 配置趋势线参数
            trendlineLinear: {
              color: 'red',
              lineStyle: 'dashed',
              width: 2
            }
          }
        ]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
}

3. 模板添加画布 #

在组件的HTML模板中添加图表画布：

<canvas id="myChart"></canvas>

关键注意事项 #

• 版本兼容：chartjs-plugin-trendline@1.1仅支持Chart.js 3.x版本，若你使用的是Chart.js 2.x，需降级插件到chartjs-plugin-trendline@0.1。
• 注册时机：插件必须在创建图表实例之前完成注册，否则图表无法识别trendlineLinear配置。
• 全局注册优化：若多个组件需要使用图表，可在app.module.ts中全局注册插件，避免重复操作：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Chart, registerables } from 'chart.js';
import TrendlinePlugin from 'chartjs-plugin-trendline';

Chart.register(...registerables, TrendlinePlugin);

import { AppComponent } from './app.component';
import { ChartDemoComponent } from './chart-demo/chart-demo.component';

@NgModule({
  declarations: [
    AppComponent,
    ChartDemoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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