Angular仪表盘ngx-charts图表超出屏幕显示不全问题咨询

• 方案1：显式绑定尺寸控制参数
  ngx-charts 提供[view]输入参数直接控制图表尺寸，优先级高于父容器继承尺寸，格式为[宽度, 高度]的数组，宽度设为null时会自动适配父容器宽度，可快速约束图表尺寸。
• 方案2：父容器加滚动适配
  给包裹图表的外层div添加溢出滚动样式，即使图表宽度超出父容器也可横向滚动查看，不会破坏整体布局。
• 方案3：优化x轴标签显示
  x轴标签过长是常见的撑宽图表原因，可开启标签旋转、自定义截断逻辑减少横向占用。
• 方案4：修正flex布局盒模型
  当前使用的flex布局可能因为padding、border撑大容器实际宽度，给外层容器添加盒模型约束即可避免该问题。

对应修改代码示例 #

HTML部分

<div class="h-420 my-16 chart-wrapper" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
  <ngx-charts-bar-vertical-stacked *fuseIfOnDom 
    [view]="chartView"
    [scheme]="widget5.scheme"
    [results]="this.widgets.widget5.mainChart[this.widget5.currentRange]"
    [gradient]="widget5.gradient" 
    [xAxis]="widget5.xAxis"
    [yAxis]="widget5.yAxis" 
    [legend]="widget5.legend"
    [showXAxisLabel]="widget5.showXAxisLabel"
    [showYAxisLabel]="widget5.showYAxisLabel" 
    [xAxisLabel]="widget5.xAxisLabel"
    [yAxisLabel]="widget5.yAxisLabel" 
    [rotateXAxisTicks]="true"
    [xAxisTickFormatting]="formatXAxisTick"
    (select)="widget5.onSelect($event)">
  </ngx-charts-bar-vertical-stacked>
</div>

样式部分

.chart-wrapper {
  overflow-x: auto;
  box-sizing: border-box;
  max-width: 100%;
}
/* 可选：强制图表最大宽度不超过父容器 */
::ng-deep ngx-charts-bar-vertical-stacked {
  max-width: 100%;
}

TS部分

// 组件类中定义
chartView: [number | null, number] = [null, 380]; // 高度比父容器低40px预留边距

// 自定义x轴标签截断逻辑，可按需调整长度阈值
formatXAxisTick(value: string): string {
  return value.length > 5 ? `${value.slice(0, 5)}...` : value;
}

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