html - 不等柱形条(谷歌图表)

Question

我在 mat-grid-tile 中有一个谷歌图表。一列的值为 50，另一列的值为 30。这些值来自服务 myService，它们是正确的。当我将鼠标悬停在这些栏上时，它会在工具提示上显示正确的值。但是列高看起来不像 50 和 30。那个 30 看起来比它应该的要短。我怎样才能使它正确？

这是我尝试过的

TS 文件

 ysData: any;
  options = {
    backgroundColor: '#fafafa',
    legend: { position: 'none' },
    hAxis: {
      baselineColor: 'none',
      ticks: []
    },
    vAxis: {
      baselineColor: 'none',
      ticks: []
    },
    colors: ['ffc000']
  }
constructor()
{
    this.ysData = [["Growth", this.myService.growth], ["Health", this.myService.health]];

}

HTML

<mat-grid-tile [colspan]="2" [rowspan]="12">
        <google-chart #chart 
         [type]="'ColumnChart'"
         [data]="ysData" 
         [options]="options" 
         [dynamicResize]="true"
         [width]="200" [height]="400">
        </google-chart>
    </mat-grid-tile>

Answer 1

您需要提供最小值和最大值的范围，在您的情况下可以在 0 到 100 之间，如下所示:

        axes: {
            y: {
                all: {
                    range: {
                        max: 100,
                        min: 0
                    }
                }
            }
        },

您可以在 JSFiddle 查看演示