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

Question

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

X 轴配置：

• 渐进式滚动
• 间隔(0,3000(//我假定以毫秒为单位

系列配置：

数据模式

• 数据模式.水平渐进式

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

提前谢谢。

Answer 1

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

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

"缩小矩形"在LightningChart JS中称为"拟合矩形"。您可以使用ChartXY.setFittingRectangleFillStyle和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>