LightningChart Js -- 在通过鼠标矩形缩小时触发的缩小事件上保持 setInterval

如何解决LightningChart Js -- 在通过鼠标矩形缩小时触发的缩小事件上保持 setInterval

我有多个 y 轴，每个都有特定的 setInterval。这里，YAxisArr 是所有 y 轴的数组。

 for (i = 0; i < this.yAxisArr.length; i++) {
  if (this.traces[i].enableAutoScaling) {
    dy.fit(false,true);
  } else {
    dy.setInverval(
      this.traces[i].displayProperties.yRange.min,this.traces[i].displayProperties.yRange.max,false,true
    );
  }
}

在缩小时，我需要将轴缩小到预先配置的值。

解决方法

您可以将事件侦听器附加到 Y 轴的 onScaleChange 事件。在这种情况下，您可以检查轴的起始值或结束值是否超出了所需的最大值和最小值的范围。如果值超出范围，那么您可以设置一个新的间隔，限制在所需的范围内。

chart.forEachAxisY(axis => {
    axis.onScaleChange((start,end) => {
        let newYMin = start
        let newYMax = end
        let updateInterval = false
        if (start < yMin) {
            newYMin = yMin
            updateInterval = true
        }
        if (end > yMax) {
            newYMax = yMax
            updateInterval = true
        }
        if (updateInterval) {
            axis.setInterval(newYMin,newYMax,false,true)
        }
    })
})

您可以在下面看到一个工作示例。

// Extract required parts from LightningChartJS.
const {
  lightningChart,DataPatterns,Themes
} = lcjs

// Import data-generator from 'xydata'-library.
const {
  createProgressiveTraceGenerator
} = xydata

// Create a XY Chart.
const chart = lightningChart().ChartXY({
  // theme: Themes.dark
  disableAnimations: true
})

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

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


const yMin = 0
const yMax = 10

series.axisX.setInterval(0,1000,true)
series.axisY.setInterval(yMin,yMax,true)

// Attach listener to all Y axes
chart.forEachAxisY(axis => {
  axis.onScaleChange((start,end) => {
    let newYMin = start
    let newYMax = end
    let updateInterval = false
    if (start < yMin) {
      newYMin = yMin
      updateInterval = true
    }
    if (end > yMax) {
      newYMax = yMax
      updateInterval = true
    }
    if (updateInterval) {
      axis.setInterval(newYMin,true)
    }
  })
})

<script src="https://unpkg.com/@arction/lcjs@2.2.1/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>