为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

沧海一幻觉 2022-09-23 22:00:02

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

X 轴配置:

  • 逐行滚动

  • 间隔(0,3000) //以毫秒为单位

系列配置:

  • 数据模式 Datapatterns.horizontalProssive

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

提前致谢。


查看完整描述

1 回答

?
精慕HU

TA贡献1562条经验 获得超6个赞

通常,当使用缩放矩形进行缩小时,闪电图表JS将使视图适合当前数据。在您的情况下,您希望返回到原始轴间隔。您可以将侦听器附加到“规模转换”事件。在此侦听器中,您可以检查新的音阶范围是否大于原始范围。如果是,请将轴间隔设置回原始范围。


series.axisX

    .onScaleChange((start, end) => {

        if (end - start > intervalSize) {

            series.axisX.setInterval(end - intervalSize, end)

        }

    })

“缩小矩形”在闪电图JS中称为“拟合矩形”。您可以使用图表XY.set适合矩形填充样式和图表XY.set调整矩形矩形笔触样式来更改它的视觉样式


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>


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信