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

Question

我正在使用闪电图表（在本例中为图表XY）在我的 react 应用程序中进行实时数据可视化。当我使用鼠标滚轮或缩放矩形进行放大时，图表将停止按预期滚动。当我缩小图表时，图表开始滚动，但不遵循我设置的间隔。有没有办法重置缩放以实时返回到当前点。

X 轴配置：

• 逐行滚动

• 间隔（0，3000） //以毫秒为单位

系列配置：

• 数据模式 Datapatterns.horizontalProssive

我也找不到控制缩小矩形的方法，如果存在，请让我知道。

提前致谢。

Answer 1

通常，当使用缩放矩形进行缩小时，闪电图表JS将使视图适合当前数据。在您的情况下，您希望返回到原始轴间隔。您可以将侦听器附加到“规模转换”事件。在此侦听器中，您可以检查新的音阶范围是否大于原始范围。如果是，请将轴间隔设置回原始范围。series.axisX&nbsp; &nbsp; .onScaleChange((start, end) => {&nbsp; &nbsp; &nbsp; &nbsp; if (end - start > intervalSize) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; series.axisX.setInterval(end - intervalSize, end)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })“缩小矩形”在闪电图JS中称为“拟合矩形”。您可以使用图表XY.set适合矩形填充样式和图表XY.set调整矩形矩形笔触样式来更改它的视觉样式chart.setFittingRectangleFillStyle(new SolidFill({color: ColorRGBA(255,0,0,125)}))// Extract required parts from LightningChartJS.const {&nbsp; &nbsp; lightningChart,&nbsp; &nbsp; DataPatterns,&nbsp; &nbsp; AxisScrollStrategies,&nbsp; &nbsp; SolidFill,&nbsp; &nbsp; ColorRGBA} = lcjsconst {&nbsp; &nbsp; createProgressiveTraceGenerator} = xydata// Create a XY Chart.const chart = lightningChart().ChartXY()// Create progressive line series.const series = chart.addLineSeries({&nbsp; &nbsp; dataPattern: DataPatterns.horizontalProgressive})// configure axisconst intervalSize = 100series.axisX&nbsp; &nbsp; .setScrollStrategy(AxisScrollStrategies.progressive)&nbsp; &nbsp; .setInterval(0, intervalSize)// limit the axis interval to the original interval sizeseries.axisX&nbsp; &nbsp; .onScaleChange((start, end) => {&nbsp; &nbsp; &nbsp; &nbsp; if (end - start > intervalSize) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; series.axisX.setInterval(end - intervalSize, end)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })// "Zoom out rectangle"chart.setFittingRectangleFillStyle(new SolidFill({color: ColorRGBA(255,0,0,125)}))// Generate traced points stream using 'xydata'-library.createProgressiveTraceGenerator()&nbsp; &nbsp; .setNumberOfPoints(1000)&nbsp; &nbsp; .generate()&nbsp; &nbsp; .setStreamRepeat(true)&nbsp; &nbsp; .toStream()&nbsp; &nbsp; .forEach(data => {&nbsp; &nbsp; &nbsp; &nbsp; series.add(data)&nbsp; &nbsp; })<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>