CanvasJS 角图 - 官方
彩相画 角图 为您的网页创建交互式图表的组件。 图书馆支持多种图表类型,包括栏,行,区,派,甜甜圈等.
重要链接
安装 CanvasJS 角图
在您的 Angular app 中安装 CanvasJS 角图包
npm install @canvasjs/angular-charts
见 npm 文档 更了解npm的用法.
导入角图模块并注册它
将 Angular 图表模块导入您的 Angular 应用程序( app. community. ts) 并注册它 .
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, CanvasJSAngularStockChartsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
设置图表选项创建图表( C)
在 app. 组件. ts 中设置图表选项并使用“ canvasjs- chart” 选择器在 app. 组件中创建图表 。 (简体中文)
//app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, CanvasJSAngularStockChartsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
chartOptions = {
title: {
text: "Basic Column Chart in Angular"
},
data: [{
type: "column",
dataPoints: [
{ label: "Apple", y: 10 },
{ label: "Orange", y: 15 },
{ label: "Banana", y: 25 },
{ label: "Mango", y: 30 },
{ label: "Grape", y: 28 }
]
}]
};
}
//app.component.html
<div>
<canvasjs-chart [options]="chartOptions"></canvasjs-chart>
</div>
角同步图
动画图表
带有缩放/平面的角图
