画布强制网格单元无限扩展

ts码:

templateStyle = {
      display: 'grid',
      'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)',
      'grid-template-rows': '150px auto auto',
      'grid-gap': '10px',
      border: '1px solid #2196F3',
      padding: '10px'
}

widgets = [
   { rowStart: 1, rowEnd: 2, colStart: 1, colEnd: 2, ... },
   { rowStart: 1, rowEnd: 2, colStart: 2, colEnd: 3, ... },
   ...
   { rowStart: 2, rowEnd: 3, colStart: 1, colEnd: 2, ... },
   ...
];

getStyle(widget): object {
  return {    
      position: 'relative',
      'grid-row-start': widget.rowStart,
      'grid-row-end': widget.rowEnd,
      'grid-column-start': widget.colStart,
      'grid-column-end': widget.colEnd,
      'text-align': 'center',
      'vertical-align': 'middle',
      'min-height': card.height + 'px'
  };
}

<div [ngStyle]="templateStyle">
  <div *ngFor="let widget of widgets" [ngStyle]="getStyle(widget)">
     <button (click)="addChart()">Add</button>
     <div *ngIf="If chart added by above button action"
        style="width: 100%; height: 100%"> // widht/height 100% to give all space of the parent
       <canvas style="width: 200px; height: 200px;"
             chartType="pie" 
             [data]="[200, 100]"
             [labels]="['A', 'B']"
             baseChart>
       </canvas>
     </div>
  </div>
</div>

呃,那条线 style="width: 200px; height: 200px; 被画布忽略,这将强制网格单元在网格外无限增长。我认为发生这种情况是因为我使用百分比声明了网格列。如果我删除画布父样式( width: 100%, height: 100% ),单元格将增长网格中可用的空间。

grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px) . 我也试着用 fr

如果我找不到解决方法,我真的在考虑用d3图表代替chartjs。