在触发 scaleChange 事件后,我正在尝试重置 LightningChartJS ChartXY 对象的 xAxis 元素上的自定义计算刻度。
但是,与 .net 库相比,JS API 似乎只允许添加新的 customTicks。
用新的 xAxis 替换当前的 xAxis 也会继续触发 onScaleChange 事件。
在触发 scaleChange 事件后,我正在尝试重置 LightningChartJS ChartXY 对象的 xAxis 元素上的自定义计算刻度。
但是,与 .net 库相比,JS API 似乎只允许添加新的 customTicks。
用新的 xAxis 替换当前的 xAxis 也会继续触发 onScaleChange 事件。
没有删除所有自定义刻度的内置方法。为了达到同样的效果,您可以将所有自定义刻度收集到一个数组中。然后,当您想删除自定义刻度时,您可以.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>