如何对齐使用ngFor创建的ngx-charts图表组件

核心实现逻辑采用CSS Grid完成2行2列排布，预留右上角空位，即可实现「左上、左下、右下」的布局效果，无需改动原有图表的数据绑定逻辑，仅需调整容器结构和新增样式规则即可。

第一步：调整HTML模板结构 #

移除原有循环项上的内联居中样式和无效margin属性，新增外层网格容器，同时通过循环索引给每个图表项绑定位置类，修正原代码中重复声明的legend属性问题：

<!-- 外层网格布局容器 -->
<div class="charts-grid-container">
  <!-- 循环生成单个图表项，通过索引标记位置 -->
  <div *ngFor="let spaceval of dataSourceTesting; let i = index" class="chart-item" [class.chart-pos-{{i}}]="true">
    <form>
      <mat-toolbar class="NavToolClass">
        <span> {{spaceval.value}}</span>
      </mat-toolbar>
      <ngx-charts-line-chart 
        [results]="spaceval.key"
        [gradient]="verticalBarOptions.gradient"
        [xAxis]="verticalBarOptions.showXAxis"
        [yAxis]="verticalBarOptions.showYAxis"
        [showXAxisLabel]="verticalBarOptions.showXAxisLabel"
        [showYAxisLabel]="verticalBarOptions.showYAxisLabel"
        [xAxisLabel]="verticalBarOptions.xAxisLabel"
        [yAxisLabel]="verticalBarOptions.yAxisLabel"
        [showGridLines]="verticalBarOptions.showGridLines"
        [view]="view"
        [legend]="verticalBarOptions.showLegend"
        [yScaleMax]="1200">
      </ngx-charts-line-chart>
    </form>
  </div>
</div>

第二步：添加对应布局样式 #

在组件的样式文件中新增如下CSS规则，定义网格规则和三个图表的固定位置：

.charts-grid-container {
  /* 定义2列等宽网格 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2行高度自适应内容 */
  grid-template-rows: auto auto;
  /* 图表之间的间距，替代原有margin设置 */
  gap: 24px;
  width: 100%;
  padding: 2%;
  box-sizing: border-box;
}

/* 第1个图表（索引0）：左上角位置 */
.chart-pos-0 {
  grid-column: 1;
  grid-row: 1;
}

/* 第2个图表（索引1）：左下角位置 */
.chart-pos-1 {
  grid-column: 1;
  grid-row: 2;
}

/* 第3个图表（索引2）：右下角位置 */
.chart-pos-2 {
  grid-column: 2;
  grid-row: 2;
}

.chart-item {
  width: 100%;
  text-align: center;
}

可选调整项 #

• 若要修改图表尺寸，可直接调整组件内view属性的宽高参数，也可移除view属性绑定，让图表自动适配父容器宽度
• 若要调整图表间的留白大小，修改.charts-grid-container中gap属性的数值即可
• 如果dataSourceTesting的数组顺序和「左上/左下/右下」的排布顺序不匹配，直接调整三个.chart-pos-*类对应的索引映射规则即可，无需改动原始数据顺序

内容的提问来源于stack exchange，提问作者Ron