LightningChart JS 3D盒系列频谱图CustomTick自定义刻度配置方法

3D Box Series Spectrogram

现有实现代码 #

const chart3D = lightningChart().Chart3D({
    disableAnimations: true,
    theme: Themes.lightNew,
})
    .setTitle( '3D Box Series Spectrogram' )
    .setBoundingBox( { x: 1, y: 1, z: 2 } )
chart3D.setCameraLocation( initialCameraLocation )


chart3D.getDefaultAxisY()
    .setScrollStrategy( AxisScrollStrategies.expansion )
    .setInterval( 0, 100 )
    .setTitle( 'Power spectrum P(f)' )
    
const axisX= chart3D.getDefaultAxisX()
    axisX.setTitle( 'Frequency (Hz)' )
    axisX.setStrokeStyle(emptyLine)
    axisX.setInterval(0, 256, false, true)
    var tick = axisX.setTickStrategy( AxisTickStrategies.Numeric)
       
chart3D.getDefaultAxisZ()
    .setTitle( 'Time' )
    .setInterval( 0, -dataHistoryLength )
    .setTickStrategy( AxisTickStrategies.Empty)
    .setScrollStrategy( AxisScrollStrategies.progressive )

问题说明 #

使用LightningChart.js开发3D盒系列频谱图时，需要将X轴与Y轴的刻度值固定为0、90、180、270、360，但调用addCustomTick方法添加自定义刻度无法正常显示。

解决方案 #

addCustomTick 无法正常生效通常由两个配置问题导致：

• 轴的可视区间未覆盖自定义刻度值：原代码X轴可视范围为0-256、Y轴为0-100，目标刻度值360超出可视范围，会被直接裁剪不显示
• 未关闭默认自动刻度逻辑：默认AxisTickStrategies.Numeric策略会自动生成刻度，容易和自定义刻度产生样式冲突、遮挡问题

正确配置步骤如下：

1. 调整对应轴的可视区间，确保覆盖所有需要显示的自定义刻度值
2. 将轴的刻度策略切换为AxisTickStrategies.Empty，关闭默认自动生成的刻度，避免干扰
3. 遍历需要显示的刻度值，逐个调用addCustomTick创建自定义刻度，可单独配置刻度线、文本、网格线样式

参考配置代码：

// 配置X轴自定义刻度
const axisX = chart3D.getDefaultAxisX()
axisX.setTitle('Frequency (Hz)')
axisX.setStrokeStyle(emptyLine)
// 调整X轴范围覆盖所有自定义刻度
axisX.setInterval(0, 360, false, true)
// 关闭默认自动刻度
axisX.setTickStrategy(AxisTickStrategies.Empty)

// 要显示的自定义刻度列表
const targetTicks = [0, 90, 180, 270, 360]
// 逐个添加自定义刻度
targetTicks.forEach(tickValue => {
  axisX.addCustomTick()
    .setValue(tickValue)
    .setTickLength(8) // 刻度线长度
    .setTextFormatter(() => String(tickValue)) // 刻度显示文本
    // 可选：配置自定义刻度对应的网格线样式
    .setGridStrokeStyle(
      new SolidLine({
        thickness: 1,
        fillStyle: new SolidFill({ color: ColorRGBA(210, 210, 210, 255) })
      })
    )
})

// Y轴配置逻辑完全一致，调整范围后添加自定义刻度即可
const axisY = chart3D.getDefaultAxisY()
axisY
  .setScrollStrategy(AxisScrollStrategies.expansion)
  // 调整Y轴范围覆盖所有自定义刻度
  .setInterval(0, 360)
  .setTitle('Power spectrum P(f)')
// 关闭Y轴默认自动刻度
axisY.setTickStrategy(AxisTickStrategies.Empty)
// 复用相同的刻度列表添加Y轴自定义刻度
targetTicks.forEach(tickValue => {
  axisY.addCustomTick()
    .setValue(tickValue)
    .setTickLength(8)
    .setTextFormatter(() => String(tickValue))
    .setGridStrokeStyle(
      new SolidLine({
        thickness: 1,
        fillStyle: new SolidFill({ color: ColorRGBA(210, 210, 210, 255) })
      })
    )
})

如果不需要完全替换默认刻度，只是额外追加几个固定刻度，可以不切换AxisTickStrategies.Empty，但必须保证自定义刻度的数值在轴当前的可视区间内，否则刻度不会显示。

内容的提问来源于stack exchange，提问作者정찬학