在Angular 6中,可以通过使用API图形库将Bootstrap进度条应用于应用程序。以下是一种实现方法:
npm install bootstrap
npm install ng2-charts
npm install chart.js
angular.json
文件中,将Bootstrap的CSS和API图形库的CSS和JS文件添加到styles
和scripts
数组中:"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/ng2-charts/css/charts.css",
"src/styles.css"
],
"scripts": [
"node_modules/chart.js/dist/Chart.min.js"
]
import { Component } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
@Component({
selector: 'app-progress-bar',
templateUrl: './progress-bar.component.html',
styleUrls: ['./progress-bar.component.css']
})
export class ProgressBarComponent {
public barChartData: ChartDataSets[] = [
{ data: [75], label: 'Progress' }
];
public barChartLabels: Label[] = [''];
public barChartOptions: ChartOptions = {
responsive: true,
scales: { x: { display: false }, y: { display: false } },
plugins: { legend: { display: false } }
};
public barChartColors: Color[] = [
{ backgroundColor: 'rgba(0, 123, 255, 0.5)' }
];
}
base-chart
指令来渲染进度条:<div style="text-align: center;">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[colors]="barChartColors"
[chartType]="'bar'">
</canvas>
</div>
通过以上步骤,你可以将API图形应用于Angular 6中的Bootstrap进度条。进度条的数据和样式可以根据实际需求进行调整。
领取专属 10元无门槛券
手把手带您无忧上云