时间戳

首页 > 解决方案 > 不等长的柱状图（谷歌图表）

html - 不等长的柱状图（谷歌图表）

问题描述

我在 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>

标签： htmlcssangulartypescriptgoogle-visualization

解决方案

对于经典，在using 选项ColumnChart上设置范围vAxisviewWindow

添加到您的图表选项... 

vAxis: {
  baselineColor: 'none',
  ticks: [],
  viewWindow: {  // <-- add view window
    min: 0
  }
},

推荐阅读