我目前正在尝试使用谷歌图表,更具体地说是qazxsw poi。
我试图制作一个简单的柱形图,但线条最终变得非常薄:this Angular implementation
我目前在HTML中设置样式和数据如下:
我的绑定如下:
<google-chart [type]="revenueChartType" [data]="revenueChartData" [columnNames]="revenueChartNames" [title]="revenueChartTitle" [options]="revenueChartOptions"></google-chart>
然后我按如下方式填充数据:
revenueChartData = [];
revenueChartType: string = "ColumnChart";
revenueChartNames: Array<string> = ["Months", "Revenue"];
revenueChartTitle: string = `Revenue for ${new Date().getFullYear()}`
revenueChartOptions: any = {}
是否有一个选项或我需要设置的东西来增加条的宽度?
尝试以下选项,这应该调整条的宽度......
//Loop through each item in revenuePerMonth
for (let i = 0; i < 12; i++) {
if (json.revenuePerMonth[i] != undefined) {
//Push items into the array
this.revenueChartData.push([json.revenuePerMonth[i].month, json.revenuePerMonth[i].total]);
} else {
this.revenueChartData.push([i, 10000]);
}
}
但是,使用离散轴(字符串数据)将解决问题。 加载数据时,将数字转换为字符串...
bar: {
groupWidth: '80%'
}
- 和 -
json.revenuePerMonth[i].month.toString()