在LightningChartJS中重置轴自定义刻度

Question

我正在尝试在触发scaleChange事件后重置LightningChartJS ChartXY对象的xAxis元素上的自定义计算刻度。

但是，与.net库相比，JS API似乎只允许添加新的自定义Ticks。

将当前的 xAxis 替换为新的 xAxis 也会不断触发 onScaleChange 事件。

Answer 1

没有内置方法可以删除所有自定义刻度。要实现相同的目标，您可以将所有自定义即时报价收集到数组中。然后，当您要删除自定义即时报价时，您可以对所有即时报价调用.dispose()方法，该方法将从轴上删除即时报价。然后，您可以创建新的即时报价。

请参阅下面的示例。在示例中，我将自定义即时报价以 2 为间隔放置。 在创建新即时报价之前，将删除所有旧的即时报价。

// Extract required parts from LightningChartJS.
const {
lightningChart,
DataPatterns,
UIOrigins,
ColorHEX,
SolidLine,
SolidFill,
AxisScrollStrategies
} = lcjs
// Import data-generator from 'xydata'-library.
const {
createProgressiveTraceGenerator
} = xydata
// Create a XY Chart.
const chart = lightningChart().ChartXY()
// Add a progressive line series.
const series = chart.addLineSeries({
dataPattern: DataPatterns.horizontalProgressive
})
// Generate random progressive points using 'xydata'-library.
createProgressiveTraceGenerator()
.setNumberOfPoints(100)
.generate()
.setStreamBatchSize(10)
.toStream()
.forEach(data => {
series.add(data)
})
// Get the default X and Y Axis
const xAxis = chart.getDefaultAxisX()
.setScrollStrategy(AxisScrollStrategies.progressive)
const yAxis = chart.getDefaultAxisY()
// Set the interval for Y Axis.
.setInterval(-10, 10, true, true)
// collection for custom ticks
const customTicks = []
xAxis.onScaleChange((start, end) => {
// remove old ticks
customTicks.forEach(oldTick => oldTick.dispose())
customTicks.length = 0
// create new ticks
let tickPlaceStart = start
while (tickPlaceStart < end) {
const tick = xAxis.addCustomTick()
tick.setValue(tickPlaceStart)
customTicks.push(tick)
tickPlaceStart += 2
}
})

<script src="https://unpkg.com/@arction/xydata@1.2.1/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>