如何让Apex Charts的X、Y轴按相同比例缩放？

要让X、Y轴保持相同比例缩放，核心是启用轴范围同步并确保图表宽高比匹配，以下是具体实现步骤：

1. 启用XY轴范围同步 #

在X轴和Y轴的配置中设置SyncExtremes="true"，这会让两个轴的缩放范围完全同步——当你缩放X轴到100-400区间时，Y轴会自动调整到相同范围，保证X=y的直线始终保持对角线形态。

2. 配置缩放模式 #

开启图表的XY轴缩放支持，确保缩放操作能同时作用于两个轴（或单个轴触发同步）。

3. 固定图表宽高比（可选但关键） #

如果图表容器的宽高比不是1:1，即使轴范围同步，视觉上X=y的线仍可能变形。可以通过设置图表的宽高为相同值，或给容器添加CSS宽高比约束来解决。

完整代码示例 #

<ApexChart TItem="EqualityPoint" 
           Title="等比例XY图表"
           Width="600"
           Height="600">
    <ApexLineSeries TItem="EqualityPoint"
                    Name="X=Y"
                    XValue="@(p => p.X)"
                    YValue="@(p => p.Y)" />
    <ApexXAxis SyncExtremes="true" 
               Min="0" 
               Max="500"
               TickAmount="6" />
    <ApexYAxis SyncExtremes="true" 
               Min="0" 
               Max="500"
               TickAmount="6" />
    <ApexZoom Enabled="true" 
              Type="ZoomType.XY" />
</ApexChart>

@code {
    public class EqualityPoint
    {
        public int X { get; set; }
        public int Y { get; set; }
    }

    private List<EqualityPoint> _dataPoints = new();

    protected override void OnInitialized()
    {
        // 生成X与Y相等的数据集
        _dataPoints = Enumerable.Range(0, 501)
                                .Select(i => new EqualityPoint { X = i, Y = i })
                                .ToList();
    }
}

关键说明 #

• SyncExtremes="true"是实现同步缩放的核心配置，必须同时在X轴和Y轴上设置。
• ZoomType.XY允许用户通过拖拽同时缩放XY轴，若只需要单轴缩放（比如仅X轴），Y轴仍会自动同步范围。
• 初始设置Min和Max为0-500，确保初始状态下轴比例一致；TickAmount统一刻度数量，进一步强化视觉比例匹配。
• 之前尝试的ForceNiceScale等属性可能会干扰同步逻辑，建议暂时移除，待同步功能生效后再按需调整。

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