ng2-charts 使用教程

最新推荐文章于 2024-08-29 07:43:59 发布

任澄翊

最新推荐文章于 2024-08-29 07:43:59 发布

阅读量294

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00063/article/details/141545696

版权

ng2-charts 使用教程

ng2-chartsBeautiful charts for Angular based on Chart.js项目地址:https://gitcode.com/gh_mirrors/ng/ng2-charts

项目介绍

ng2-charts 是一个基于 Chart.js 的 Angular 图表库，提供了响应式、美观的图表组件。它支持多种图表类型，包括线图、柱状图、雷达图、饼图等。ng2-charts 由 Valor Software 开发并维护，最新版本为 6.0.1，发布于三个月前。

项目快速启动

安装

首先，确保你已经安装了 Angular CLI。然后，通过 npm 安装 ng2-charts 和 Chart.js：

npm install ng2-charts chart.js

引入模块

在你的 Angular 项目中，引入 NgChartsModule：

import { NgChartsModule } from 'ng2-charts';

@NgModule({
  declarations: [
    // 你的组件
  ],
  imports: [
    // 其他模块
    NgChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

创建图表

在你的组件中，使用 baseChart 指令创建图表：

import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataset } from 'chart.js';

@Component({
  selector: 'app-my-chart',
  template: `
    <div>
      <canvas baseChart
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [legend]="chartLegend"
        [chartType]="chartType">
      </canvas>
    </div>
  `
})
export class MyChartComponent {
  chartData: ChartDataset[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }
  ];
  chartLabels: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  chartOptions: ChartOptions = {
    responsive: true
  };
  chartLegend = true;
  chartType: ChartType = 'bar';
}