如何实现ejs-lineargauge的majorTicks与minorTicks在轴线中间对齐

解决方案 #

你可以通过调整ticks的offset属性实现刻度中点对齐轴线的效果，配置逻辑如下：

1. 主刻度offset取值为负的主刻度高度的1/2，次刻度offset取值为负的次刻度高度的1/2，即可让刻度中点刚好落在轴线上
2. 配合distanceFromScale参数调整刻度水平/垂直方向的位置，适配你的布局需求

可直接参考的完整配置示例：

axis: {
  // 此处保留你的轴线原有配置即可
  line: {
    width: 3,
    color: '#e0e0e0'
  },
  majorTicks: {
    height: 12,
    interval: 1,
    width: 2,
    offset: -6, // 12/2 = 6，负值代表向轴线内侧偏移
    distanceFromScale: {x: 7, y: 0}
  },
  minorTicks: {
    // 按你的需求设置次刻度基础参数
    height: 6,
    interval: 0.5,
    width: 1,
    offset: -3, // 6/2 = 3，同主刻度逻辑
    distanceFromScale: {x: 7, y: 0}
  }
}

如果你的刻度需要放在轴线另一侧，把offset改为对应正值即可，逻辑保持一致。

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