在 LightningChartJS 中重置轴 CustomTicks

Question

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

然而，与 .net 库相比，JS API 似乎只允许添加新的 customTicks。

用新的 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>

在 LightningChartJS 中重置轴 CustomTicks

Reset Axis CustomTicks in LightningChartJS

javascript

charts

lightningchart