如何在ngx折线图中设置图表与坐标轴标签的间距

问题说明 #

使用ngx折线图时，页面缩放后X、Y轴标签会与轴上的数据重叠，标签和数值之间没有间距。

解决方法 #

方法1：自定义CSS调整标签间距 #

通过::ng-deep穿透组件样式，给轴标签添加外边距，直接拉开与轴数据的距离：

::ng-deep .x-axis-label {
  margin-top: 15px !important; /* 给X轴标签添加上边距 */
}

::ng-deep .y-axis-label {
  margin-right: 15px !important; /* 给Y轴标签添加右边距 */
}

方法2：配置图表边距 #

利用ngx-charts提供的margin输入属性，给图表四周预留足够空间，避免标签和数据挤压：
在折线图组件上添加[margin]配置：

<ngx-charts-line-chart 
  style="padding:10px 10px 10px 10px;" 
  (window:resize)="ResizeChart(ContainerRef1.offsetWidth)"  
  [results]="val.key"
  [gradient]="verticalBarOptions.gradient"
  [xAxis]="verticalBarOptions.showXAxis"
  [yAxis]="verticalBarOptions.showYAxis"
  [legend]="verticalBarOptions.showLegend"
  [showXAxisLabel]="verticalBarOptions.showXAxisLabel"
  [showYAxisLabel]="verticalBarOptions.showYAxisLabel"
  [xAxisLabel]="verticalBarOptions.xAxisLabel"
  [yAxisLabel]="verticalBarOptions.yAxisLabel"
  [showGridLines]="verticalBarOptions.showGridLines"
  [yScaleMax]="1200"
  [view]="view"
  [margin]="{top: 20, right: 40, bottom: 40, left: 40}" <!-- 添加边距配置 -->
>
</ngx-charts-line-chart>

方法3：修正重复配置（原代码问题） #

原代码中重复设置了[legend]属性，需要移除其中一个，避免冲突：
移除<ngx-charts-line-chart>标签内的[legend]="false"，保留[legend]="verticalBarOptions.showLegend"即可。

修改后的完整代码示例 #

HTML部分 #

<div fxFlex.gt-xs="50%"  [fxFlex.gt-md]="regularDistribution"  *ngFor = "let val of data"   style="text-align:center;font-family: 'Open Sans', sans-serif;padding:10px 10px 10px 10px;">  
    <div #ContainerRef>
            <mat-toolbar  class="NavToolClass" style="height:31.5px;border-radius: 2px;">
                <span> {{val.value}}</span>
            </mat-toolbar>
            <pre></pre>
            <ngx-charts-line-chart 
              style="padding:10px 10px 10px 10px;" 
              (window:resize)="ResizeChart(ContainerRef1.offsetWidth)"  
              [results]="val.key"
              [gradient]="verticalBarOptions.gradient"
              [xAxis]="verticalBarOptions.showXAxis"
              [yAxis]="verticalBarOptions.showYAxis"
              [legend]="verticalBarOptions.showLegend"
              [showXAxisLabel]="verticalBarOptions.showXAxisLabel"
              [showYAxisLabel]="verticalBarOptions.showYAxisLabel"
              [xAxisLabel]="verticalBarOptions.xAxisLabel"
              [yAxisLabel]="verticalBarOptions.yAxisLabel"
              [showGridLines]="verticalBarOptions.showGridLines"
              [yScaleMax]="1200"
              [view]="view"
              [margin]="{top: 20, right: 40, bottom: 40, left: 40}"
            >
            </ngx-charts-line-chart>

    <pre></pre>
<pre></pre>    
</div>
</div>

TS部分 #

verticalBarOptions = {
  showXAxis: true,
  showYAxis: true,
  gradient: false,
  showLegend: false,
  showGridLines: true,
  showXAxisLabel: true,
  xAxisLabel: "Date",
  showYAxisLabel: true,
  yAxisLabel: "Size (GB)",
  animations:true,
  barPadding:5,
  groupPadding:5
};

CSS部分 #

::ng-deep .x-axis-label {
  margin-top: 15px !important;
}

::ng-deep .y-axis-label {
  margin-right: 15px !important;
}

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