在 Lightningchart js 轴上设置刻度间隔

问题描述

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

这可以用 Lightningchart 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) }),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 和背景颜色？

解决方法

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

您的自定义刻度样式代码略有偏差（您实际上是在设置背景的边框笔触样式，并且有一个不合适的 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)

编辑： 我们将很快添加一个关于使用滚动轴的自定义刻度定位的官方示例，但这里有一个代码片段，您现在可以参考。 想法是遵循轴间隔，在关键位置上创建刻度，并销毁不在视野中的刻度。

// * 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交互示例）中找到。