javascript - 如何使 GoogleChart 在 mat-grid 中灵活？

Question

我在 mat-grid 列表中有谷歌图表，这是我为页面上的元素对齐生成的。但是当我更改浏览器的宽度时，该图表并没有像预期的那样变小。grid-tile 及其溢出不好。通常所有图像、文本等都在垫网格中 flex ，但我不明白为什么这不适用于 googleChart。

演示: https://stackblitz.com/edit/angular-pt2kha?file=app/grid-list-overview-example.html

你可以在这里看到行为:

Answer 1

您必须使用百分比和 dynamicResize 属性一起设置图表的大小。将高度和宽度设置为带有百分比的样式并启用 dynamicResizing。

例子:

 <google-chart #chart  
          style="border-style:solid;border-width:1px;width:90%;height:90%" 
          [title]="title"
          [type]="type"
          [data]="data"
          [columnNames]="columnNames"
          [options]="options"
          [dynamicResize]="true"              
          >

参见 Stackblitz