在闪电图 js 轴上设置刻度间隔

Question

如何设置轴上刻度的间隔？ 我使用了 AxisTickStrategies.Numeric 但这会根据图表大小自动设置刻度。 在 0 到 20 的轴范围内，我想每 2.5 设置一个次要刻度，每 5 个单位设置一个主要刻度。

闪电图 js 可以做到这一点吗？ 下面的代码设置了刻度样式，但我没有找到任何定义间隔的选项。

var color = '#435533';

axis.setTickStrategy(AxisTickStrategies.Numeric, (styler) =>
    styler
        .setMajorTickStyle(new VisibleTicks({
            tickStyle: new SolidLine({fillStyle: new SolidFill({ color: ColorHEX(color) }), thickness: 1 }),
            labelFillStyle: new SolidFill({ color: ColorHEX(color), tickLength: 8 }),
            gridStrokeLength: 0
        }))
        .setMinorTickStyle(new VisibleTicks({
            tickStyle: new SolidLine({fillStyle: new SolidFill({ color: ColorHEX(color) }), thickness: 1 }),
            labelFillStyle: new SolidFill({ color: ColorHEX(color), tickLength: 4 }),
            gridStrokeLength: 0
        }))  

我也尝试过 CustomTick，但我不确定这是否是正确的方法。

axis.addCustomTick().setMarker( 
    marker => marker
    .setFont(font => font
        .setSize(25)
    )
    .setBackground(background => background
        .setStrokeStyle((line) => line
            .setFillStyle(style => style
                .setColor(new SolidFill({ color : ColorHEX('#555555')}))
            )
        )
    )
).setValue(3);

此代码按预期将刻度设置为 3，但背景样式不起作用。如果 CustomTicks 是要走的路，我该如何设置 tickLength 和背景颜色？

Answer 1

对于自定义刻度定位，创建自定义刻度确实是正确的做法。

您的自定义刻度样式代码略有偏差（您实际上是在设置背景边框笔划的样式，并且有一个 setColor 调用不合适）。这是固定的语法：

axis.addCustomTick()
.setMarker( 
    marker => marker
    .setFont(font => font
        .setSize(25)
    )
    .setBackground(background => background
        .setFillStyle(new SolidFill({ color: ColorHEX('#555555')}))
    )
)
.setValue(3);

我了解您正在寻找滚动应用程序中的自定义刻度逻辑，为此我们没有官方示例，因此我将很快通过示例扩展此答案，并举例说明如何实现。

CustomTick“长度”可以通过其背景的方法来设置。

background.setPointerLength(5)

编辑： 我们将很快添加一个关于使用滚动轴进行自定义刻度定位的官方示例，但这里有一个代码 sn-p，您现在可以参考。 Idea 遵循 Axis 间隔，在关键位置创建刻度，并销毁超出视野的刻度。

// * Manage X Axis ticks with custom logic *
// Disable default X ticks.
const xAxis = chart.getDefaultAxisX()
    .setTickStrategy(AxisTickStrategies.Empty)

// Define style for custom ticks.
const gridStrokeStyleMajor = new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorHEX('#fff').setA(100) }) })
const gridStrokeStyleMinor = new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorHEX('#fff').setA(50) }) })
const backgroundStrokeStyle = new SolidLine({ thickness: 1, fillStyle: new SolidFill({color: ColorHEX('#fff').setA(50)}) })

const addCustomTickX = (pos, isMinor) => {
    const tick = xAxis.addCustomTick()
        // Set tick text.
        .setTextFormatter(() => String(pos))
        // Set tick location.
        .setValue(pos)
        // Style tick.
        .setMarker(marker => marker
            .setFont(font => font
                .setSize( isMinor ? 12 : 14 )
            )
            .setBackground(background => background
                .setStrokeStyle(backgroundStrokeStyle)
                // "tick length" as pixels.
                .setPointerLength(6)
            )
        )
        .setGridStrokeStyle(isMinor ? gridStrokeStyleMinor : gridStrokeStyleMajor)
    customTicks.push(tick)
    return tick
}

// Create custom ticks on X Axis on realtime scrolling application.
let customTicks = []
const createTicksInRangeX = (start, end) => {
    // Major ticks every 1000 units.
    const majorTickInterval = 1000
    for (let majorTickPos = start - (start % majorTickInterval); majorTickPos <= end; majorTickPos += majorTickInterval) {
        if (majorTickPos >= start) {
            addCustomTickX(majorTickPos, false)
        }
    }
    // Major ticks every 500 units, but not at same interval as major ticks.
    const minorTickInterval = 500
    for (let minorTickPos = start - (start % minorTickInterval); minorTickPos <= end; minorTickPos += minorTickInterval) {
        if (minorTickPos >= start && minorTickPos % majorTickInterval !== 0) {
            addCustomTickX(minorTickPos, true)
        }
    }
}
// X range until which custom ticks are valid.
let customTicksPos = 0
xAxis.onScaleChange((start, end) => {
    // Ensure new ticks are created.
    if (end > customTicksPos) {
        createTicksInRangeX(customTicksPos, end)
        customTicksPos = end
    }

    // Destroy ticks that are out of scrolling range.
    customTicks = customTicks.filter(tick => {
        if (tick.getValue() < start) {
            // Tick is out of view.
            tick.dispose()
            return false
        } else {
            return true
        }
    })
})

// Setup X Axis as progressive scrolling.
xAxis
    .setTitle('X Axis (custom ticks)')
    .setInterval(0, 1400)
    .setScrollStrategy(AxisScrollStrategies.progressive)

编辑： 官方添加了此类应用的示例，请找here（Arction网站，JS交互示例）。