如何在缩小时重置滚动行为？

Question

我正在使用 arction 的闪电图表（在本例中为 chartXY）在我的反应中进行实时数据可视化 application.When 我使用鼠标滚轮或缩放矩形进行放大，图表停止滚动为 expected.When 我缩小图表开始滚动，但不遵循我设置的间隔 to.Is 有什么方法可以重置缩放以实时返回当前点。

X轴配置：

渐进滚动
interval(0,3000) //我假设以毫秒为单位

系列配置：

数据模式Datapatterns.horizontalProgressive

我也找不到控制缩小矩形的方法，如果有的话请告诉我。

提前致谢。

Answer 1

通常情况下，当使用缩放矩形缩小时，LightningChart JS 会将视图适合当前数据。在你的情况下，你想回到原来的轴间隔。您可以将侦听器附加到 Axis.onScaleChange 事件。在此侦听器中，您可以检查新的比例范围是否大于原始范围。如果是，则将轴间隔设置回原来的范围。

series.axisX
    .onScaleChange((start, end) => {
        if (end - start > intervalSize) {
            series.axisX.setInterval(end - intervalSize, end)
        }
    })

"Zoom out rectangle" 在 LightningChart JS 中被称为 "Fitting rectangle"。您可以使用 ChartXY.setFittingRectangleFillStyle and ChartXY.setFittingRectangleStrokeStyle

更改它的视觉样式

chart.setFittingRectangleFillStyle(new SolidFill({color: ColorRGBA(255,0,0,125)}))

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    DataPatterns,
    AxisScrollStrategies,
    SolidFill,
    ColorRGBA
} = lcjs

const {
    createProgressiveTraceGenerator
} = xydata

// Create a XY Chart.
const chart = lightningChart().ChartXY()

// Create progressive line series.
const series = chart.addLineSeries({
    dataPattern: DataPatterns.horizontalProgressive
})

// configure axis
const intervalSize = 100
series.axisX
    .setScrollStrategy(AxisScrollStrategies.progressive)
    .setInterval(0, intervalSize)

// limit the axis interval to the original interval size
series.axisX
    .onScaleChange((start, end) => {
        if (end - start > intervalSize) {
            series.axisX.setInterval(end - intervalSize, end)
        }
    })

// "Zoom out rectangle"
chart.setFittingRectangleFillStyle(new SolidFill({color: ColorRGBA(255,0,0,125)}))

// Generate traced points stream using 'xydata'-library.
createProgressiveTraceGenerator()
    .setNumberOfPoints(1000)
    .generate()
    .setStreamRepeat(true)
    .toStream()
    .forEach(data => {
        series.add(data)
    })

<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>

如何在缩小时重置滚动行为？

How to reset scroll behaviour on zoom out?

javascript

charts

lightningchart