在ng2 charts的柱状图组件中,可以通过设置options属性中的barPercentage和barThickness来调整相邻两个柱状条之间的间距。具体代码示例如下:
html文件:
ts文件:
import { Component } from '@angular/core';
@Component({
selector: 'app-bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent {
public barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true,
barPercentage: 0.5, // 设置相邻两个柱状条之间的间距
barThickness: 20 // 设置柱状条的宽度
};
public barChartLabels: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
public barChartType = 'bar';
public barChartLegend = true;
public barChartData: any[] = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
];
public chartClicked(e: any): void {
console.log(e);
}
public chartHovered(e: any): void {
console.log(e);
}
}