Google图表-栏极细

Question

我目前正在尝试使用Google图表，更具体地说是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]);
    }
}

是否需要选择或设置一些选项来增加条形的宽度？

Answer 1

尝试以下选项，该选项应用于调整条的宽度...

bar: {
  groupWidth: '80%'
}

但是，使用离散轴（字符串数据）将解决此问题。
加载数据时，将数字转换为字符串...

json.revenuePerMonth[i].month.toString()

-和-

i.toString()