时间戳

首页 > 解决方案 > LightningChart Js - 在鼠标矩形缩小时触发缩小事件时保持 setInterval

javascript - 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
    );
  }
}

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

标签： javascriptlightningchart

解决方案

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

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, false, true)
series.axisY.setInterval(yMin, yMax, false, 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, newYMax, false, 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>

推荐阅读