在lightningchart js轴上设置刻度间隔

Question

如何设置轴上记号的间隔？我使用过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) }), 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);

我知道你在滚动应用程序中寻找自定义ticks逻辑，因为我们没有官方的例子，所以我将很快扩展这个答案，并举例说明如何实现这一点。

CustomTick"长度"；可以通过其背景的方法进行设置。

background.setPointerLength(5)

编辑：我们将很快添加一个关于滚动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)

编辑：已经添加了此类应用程序的官方示例，请在此处找到(Arction网站，JS交互式示例(。