如何设置ngx-charts的Y轴始终从0开始？版本^20.5.0

问题描述 #

• 设置[yScaleMin]="0"未生效：当数据集最小值大于20时，Y轴会从20开始渲染
• 改用[yAxisTicks]="[0,20,40,60,80,100]"后，Y轴虽始终从0开始，但图表底部显示错乱（见下图）

图表代码 #

<ngx-charts-line-chart
#chart
*ngIf="chartType === chartTypes.line"
[autoScale]="true"
[view]="[2236, 300]"
[results]="data"
[timeline]="false"
[xAxis]="true"
[yAxis]="true"
[yScaleMin]="0"
[yScaleMax]="100"
[curve]="shape.curveMonotoneX"
[animations]="false"
[showRefLines]="true"
[scheme]="colorScheme"></ngx-charts-line-chart>

测试数据 #

[
    [
        "2024-09-19T00:59:59.999+03:00",
        0.34720054
    ],
    [
        "2024-09-19T15:03:58.978+03:00",
        0.4430851
    ],
    [
        "2024-09-20T00:59:59.999+03:00",
        0.19360663
    ],
    [
        "2024-09-21T00:59:59.999+03:00",
        0.26151285
    ],
    [
        "2024-09-24T00:59:59.999+03:00",
        0.30450037
    ]
]

解决办法 #

1. 关闭自动缩放：当前设置的[autoScale]="true"会优先于手动配置的yScaleMin/yScaleMax，导致Y轴自动适配数据范围。将[autoScale]="false"，即可让yScaleMin="0"生效。
2. 规范自定义刻度配置：若需自定义刻度，需保证yAxisTicks的范围与yScaleMin/yScaleMax完全匹配，同时关闭自动缩放。调整后的代码示例：

<ngx-charts-line-chart
#chart
*ngIf="chartType === chartTypes.line"
[autoScale]="false"
[view]="[2236, 300]"
[results]="data"
[timeline]="false"
[xAxis]="true"
[yAxis]="true"
[yScaleMin]="0"
[yScaleMax]="100"
[yAxisTicks]="[0,20,40,60,80,100]"
[curve]="shape.curveMonotoneX"
[animations]="false"
[showRefLines]="true"
[scheme]="colorScheme"></ngx-charts-line-chart>

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