目录
2. 将ng-bootstrap和CanvasJS Angular图表组件添加到项目中
介绍
图表基本上是数据的图形表示，它们以可视化易于理解的方式汇总大数据或信息。作为网页设计师/开发人员，显然会在某个时间点在仪表板上工作。仪表板在图表的帮助下提供了大量信息。在本教程中，我将展示如何在Angular 14应用程序的 ng-bootstrap navs（选项卡）中添加 CanvasJS图表。我已经在Angular 14中构建了该应用程序，但CanvasJS和ng-bootstrap适用于多个版本的angular。NG-Bootstrap是一个专为AngEcosystem设计的Bootstrap小部件。CanvasJS是一个强大的图表库，面向网页设计师和开发人员。图表组件支持30多种图表类型，具有响应互式，易于自定义，并允许您创建与您的网页/应用程序设计相匹配的精美图表。
使用代码
/* app.component.html */
<h1 class="text-center">CanvasJS Angular Charts in ng-bootstap Tabs</h1>
<div class="container">
<ul ngbNav #nav="ngbNav" class="nav-tabs" (shown)="navChangeEvent($event)"
(hidden)="navHiddenEvent($event)">
<li [ngbNavItem]="1">
<a ngbNavLink>Line Chart</a>
<ng-template ngbNavContent>
<canvasjs-chart
*ngIf="showChart"
[options]="lineChartOptions"
(chartInstance)="getChartInstance($event)"
[styles]="{ width: '100%', height: '360px' }"
></canvasjs-chart>
</ng-template>
</li>
<li [ngbNavItem]="2">
<a ngbNavLink>Column Chart</a>
<ng-template ngbNavContent>
<canvasjs-chart
*ngIf="showChart"
[options]="columnChartOptions"
(chartInstance)="getChartInstance($event)"
[styles]="{ width: '100%', height: '360px' }"
></canvasjs-chart>
</ng-template>
</li>
<li [ngbNavItem]="3">
<a ngbNavLink>Pie Chart</a>
<ng-template ngbNavContent>
<canvasjs-chart
*ngIf="showChart"
[options]="pieChartOptions"
(chartInstance)="getChartInstance($event)"
[styles]="{ width: '100%', height: '360px' }"
></canvasjs-chart>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav" class="mt-2"></div>
</div>/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;
@NgModule({
declarations: [
AppComponent,
CanvasJSChart
],
imports: [
BrowserModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
/* app.component.ts */
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
active = 1;
chart: any;
showChart: Boolean = false;
columnChartOptions = {
animationEnabled: true,
title: {
text: 'Angular Column Chart in Bootstrap Tabs',
},
data: [{
type: 'column',
dataPoints: [
{ label: 'apple', y: 10 },
{ label: 'orange', y: 15 },
{ label: 'banana', y: 25 },
{ label: 'mango', y: 30 },
{ label: 'grape', y: 28 }
]
}]
};
lineChartOptions = {
animationEnabled: true,
title: {
text: 'Angular Line Chart in Bootstrap Tabs',
},
data: [{
type: 'line',
dataPoints: [
{ label: 'apple', y: 10 },
{ label: 'orange', y: 15 },
{ label: 'banana', y: 25 },
{ label: 'mango', y: 30 },
{ label: 'grape', y: 28 }
]
}]
};
pieChartOptions = {
animationEnabled: true,
title: {
text: 'Angular Pie Chart in Bootstrap Tabs',
},
data: [{
type: 'pie',
dataPoints: [
{ label: 'apple', y: 10 },
{ label: 'orange', y: 15 },
{ label: 'banana', y: 25 },
{ label: 'mango', y: 30 },
{ label: 'grape', y: 28 }
]
}]
};
getChartInstance(chart: object) {
this.chart = chart;
}
navChangeEvent(e: any) {
this.showChart = true;
}
navHiddenEvent(e: any) {
this.showChart = false;
}
ngAfterViewInit() {
this.showChart = true;
}
}分步说明
创建Angular应用程序并添加ng-bootstrap
1. 创建Angular项目
使用Angular CLI创建一个新的 Angular 项目。如果您已有应用，请忽略此步骤。
ng new angular-bootstrap-charts
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS2. 将ng-bootstrap和CanvasJS Angular图表组件添加到项目中
创建Angular项目后，将ng-bootstrap和CanvasJS angular图添加到项目中。ng-bootstrap可以使用Angular CLI方式添加，也可以手动添加，您只需执行“npm install package-name”。以下是这两种方法的语法。
/* Angular CLI Way */
ng add @ng-bootstrap/ng-bootstrap
/* Manual Way */
npm install @ng-bootstrap/ng-bootstrap --saveCanvasJS angular图可以从他们的官方网站下载（npm包不是官方的）并将其保存在assets文件夹中以导入到项目中。
安装包后，让我们导入模块并注册它。打开 app.module.ts 文件并注册模块。
/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;
@NgModule({
declarations: [
AppComponent,
CanvasJSChart
],
imports: [
BrowserModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }添加引导导航（选项卡）组件
为简单起见，让我们向应用程序添加引导选项卡。您可以考虑添加任何引导组件，如模态、手风琴等。
1. 添加引导导航
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li [ngbNavItem]="1">
<a ngbNavLink>Line Chart</a>
<ng-template ngbNavContent>
</ng-template>
</li>
.
.
.
</ul>
<div [ngbNavOutlet]="nav" class="mt-2"></div>2. 将图表添加到导航
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li [ngbNavItem]="1">
<a ngbNavLink>Line Chart</a>
<ng-template ngbNavContent>
<canvasjs-chart
[options]="lineChartOptions"
[styles]="{ width: '100%', height: '360px' }"
></canvasjs-chart>
</ng-template>
</li>
.
.
.
</ul>
<div [ngbNavOutlet]="nav" class="mt-2"></div>3.仅在活动选项卡中显示图表
在选项卡中，将显示活动选项卡的内容，而隐藏非活动选项卡的内容。因此，需要条件呈现，以便不呈现非活动选项卡中的图表。为此，您可以使用在选项卡可见或隐藏时不断切换的标志。根据标志，您可以呈现图表。
<ul ngbNav #nav="ngbNav" class="nav-tabs" (shown)="navChangeEvent($event)"
(hidden)="navHiddenEvent($event)">
<li [ngbNavItem]="1">
<a ngbNavLink>Line Chart</a>
<ng-template ngbNavContent>
<canvasjs-chart
*ngIf="showChart"
[options]="lineChartOptions"
(chartInstance)="getChartInstance($event)"
[styles]="{ width: '100%', height: '360px' }"
></canvasjs-chart>
</ng-template>
</li>
.
.
.
</ul>在撰写本文时，CanvasJS v3.6.7用于Angular 14项目。但是，CanvasJS图表适用于所有版本的Angular。如果您不熟悉CanvasJS Angular charts或CanvasJS API，或者需要复习一下，我建议您阅读 CanvasJS图表文档。对于ng-bootstrap，请查看此文档页面。
https://www.codeproject.com/Tips/5338744/Add-Interactive-Angular-Charts-to-ng-bootstrap-Com
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
