时间戳

首页 > 解决方案 > 在 LightningChartJS 中重置 Axis CustomTicks

javascript - 在 LightningChartJS 中重置 Axis CustomTicks

问题描述

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

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

用新的 xAxis 替换当前的 xAxis 也会继续触发 onScaleChange 事件。

标签： javascriptchartslightningchart

解决方案

没有删除所有自定义刻度的内置方法。为了达到同样的效果，您可以将所有自定义刻度收集到一个数组中。然后，当您想删除自定义刻度时，您可以.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>

推荐阅读