图表组件

@abp/ng.components/chart.js 提供的 ABP 图表组件基于 charts.js v3+ 版本。您无需单独安装 chart.js 包。由于 @abp/ng.components 依赖于 chart.js，该包已在您的项目中自动安装。

图表组件采用懒加载方式引入 chart.js 脚本，因此不会增加打包体积。

使用方法

首先需要在组件中导入 ChartComponent，然后即可使用 abp-chart 组件。参考以下示例：

// chart-demo.component.ts
import { Component } from "@angular/core";
import { ChartComponent } from "@abp/ng.components/chart.js";

@Component({
  selector: "app-chart-demo",
  imports: [ChartComponent],
  template: ` <abp-chart type="pie" [data]="data"></abp-chart> `,
})
export class ChartDemoComponent {
  data = {
    labels: ["数据1", "数据2", "数据3"],
    datasets: [
      {
        label: "数据集1",
        data: [40, 15, 45],
        backgroundColor: ["#ff7675", "#fdcb6e", "#0984e3"],
      },
    ],
  };
}

重要提示：如果仅修改图表数据而不创建新的数据实例，将不会触发变更检测。要使图表重新绘制，需要创建新的数据对象。

效果展示：

示例

环形图

import { Component } from "@angular/core";
import { ChartComponent } from "@abp/ng.components/chart.js";

@Component({
  selector: "app-chart-demo",
  imports: [ChartComponent],
  template: `
    <abp-chart
      type="doughnut"
      [data]="data"
      [options]="options"
      width="400px"
      height="400px"
      [plugins]="myPlugin"
    />
  `,
})
export class ChartDemoComponent {
  data = {
    labels: ["数据1", "数据2", "数据3"],
    datasets: [
      {
        label: "数据集1",
        data: [40, 15, 45],
        backgroundColor: ["#a0e6c3", "#f0ea4c", "#5b9dc3"],
      },
    ],
  };

  options = {
    plugins: {
      title: {
        display: true,
        text: "环形图",
        fontSize: 16,
      },
      legend: {
        position: "bottom",
      },
    },
  };

  myPlugin = [
    {
      afterRender: (chart, args, options) => {
        console.log("图表已渲染完成");
      },
    },
  ];
}

效果展示：

柱状图

import { Component } from "@angular/core";
import { ChartComponent } from "@abp/ng.components/chart.js";

@Component({
  selector: "app-chart-demo",
  imports: [ChartComponent]
  template: `
    <abp-chart
      type="bar"
      [data]="data"
      width="400px"
      height="400px"
    />
  `,
})
export class ChartDemoComponent {
  data = {
    labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
    datasets: [
      {
        label: "第一数据集",
        backgroundColor: "#42A5F5",
        data: [65, 59, 80, 81, 56, 55, 40],
      },
      {
        label: "第二数据集",
        backgroundColor: "#FFA726",
        data: [28, 48, 40, 19, 86, 27, 90],
      },
    ],
  };
}

效果展示：

雷达图

import { Component } from "@angular/core";
import { ChartComponent } from "@abp/ng.components/chart.js";

@Component({
  selector: "app-chart-demo",
  imports: [ChartComponent]
  template: `
    <abp-chart
      type="radar"
      [data]="data"
      width="400px"
      height="400px"
    />

    <button class="btn btn-primary-outline mt-4" (click)="addDataset()">
      添加数据集
    </button>
  `,
})
export class ChartDemoComponent {
  data = {
    labels: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
    datasets: [
      {
        label: "数据集1",
        backgroundColor: "rgba(179,181,198,0.2)",
        borderColor: "rgba(179,181,198,1)",
        data: [65, 59, 90, 81, 56, 55, 40, 35, 82, 51, 62, 95],
      },
      {
        label: "数据集2",
        backgroundColor: "rgba(255,99,132,0.2)",
        borderColor: "rgba(255,99,132,1)",
        data: [28, 48, 40, 58, 96, 27, 100, 44, 85, 77, 71, 39],
      },
    ],
  };

  addDataset() {
    this.data = {
      ...this.data,
      datasets: [
        ...this.data.datasets,
        {
          label: "数据集3",
          backgroundColor: "rgba(54,162,235,0.2)",
          borderColor: "rgba(54, 162, 235, 1)",
          data: [90, 95, 98, 91, 99, 96, 89, 95, 98, 93, 92, 90],
        },
      ],
    };
  }
}

效果展示：

更多示例请参考 chart.js 官方示例。

API

abp-chart

属性

方法