如何让Chart.js散点图坐标轴刻度一致并显示为正方形？

要达成需求，需要同步XY轴的刻度规则，同时强制图表保持正方形比例，以下是具体实现步骤：

1. 统一XY轴的刻度配置 #

在图表的options.scales中，给X、Y轴设置完全相同的起始值（min）、终止值（max）和刻度增量（stepSize），确保两个轴的刻度体系完全一致：

const scatterChart = new Chart(document.getElementById('scatter-chart'), {
  type: 'scatter',
  data: {
    datasets: [{
      label: '散点数据',
      data: [{x: 10, y: 20}, {x: 30, y: 50}, {x: 70, y: 60}],
      backgroundColor: '#2196F3'
    }]
  },
  options: {
    scales: {
      x: {
        min: 0,       // 自定义X轴起始值
        max: 100,     // 自定义X轴终止值
        ticks: {
          stepSize: 10,  // 自定义X轴刻度增量
          autoSkip: false // 禁止自动跳过刻度，保证所有刻度显示
        }
      },
      y: {
        min: 0,       // 与X轴起始值一致
        max: 100,     // 与X轴终止值一致
        ticks: {
          stepSize: 10,  // 与X轴刻度增量一致
          autoSkip: false
        }
      }
    }
  }
});

2. 强制图表为正方形比例 #

有两种可靠方式实现：

方式一：用Chart.js内置比例参数 #

直接在options中设置aspectRatio: 1，让图表自动保持宽高1:1的正方形比例：

options: {
  aspectRatio: 1, // 强制宽高比为1:1
  // ... 其他轴配置
}

方式二：手动控制容器尺寸 #

如果需要更精准的尺寸控制，先禁用Chart.js的自动比例适配，再给图表容器设置相等的宽高：

/* 给图表容器设置正方形尺寸 */
#scatter-chart-container {
  width: 450px;
  height: 450px;
}

options: {
  maintainAspectRatio: false, // 关闭自动比例适配
  // ... 其他轴配置
}

3. 优化细节：避免刻度标签挤压 #

如果刻度数量较多导致标签重叠，可以调整标签的旋转角度或字体大小：

ticks: {
  stepSize: 10,
  autoSkip: false,
  maxRotation: 0, // 标签不旋转，横向显示
  fontSize: 10    // 缩小标签字体
}

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