解决方法如下:
npm install apexcharts ngx-apexcharts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgApexchartsModule } from 'ngx-apexcharts';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgApexchartsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
import { Component } from '@angular/core';
import { ApexOptions } from 'ng-apexcharts';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
public series: number[] = [44, 55, 41, 17, 15];
public chart: ApexOptions = {
chart: {
type: 'bar',
height: 350,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded',
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ['transparent'],
},
xaxis: {
categories: ['A', 'B', 'C', 'D', 'E'],
},
yaxis: {
title: {
text: '数量',
},
},
fill: {
opacity: 1,
},
tooltip: {
y: {
formatter: (val: number) => `${val}个`,
},
},
};
}
div {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
这样就完成了将数据转换为柱状图显示的解决方法。运行 Angular 项目,即可在页面上看到柱状图的显示效果。