谷歌图表 - 列非常薄

问题描述 投票:1回答:1

我目前正在尝试使用谷歌图表,更具体地说是qazxsw poi。

我试图制作一个简单的柱形图,但线条最终变得非常薄:this Angular implementation

我目前在HTML中设置样式和数据如下:

Graph

我的绑定如下:

<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 = {}

是否有一个选项或我需要设置的东西来增加条的宽度?

angular google-visualization
1个回答
1
投票

尝试以下选项,这应该调整条的宽度......

//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()
© www.soinside.com 2019 - 2024. All rights reserved.