Progressive xAxis - 定时间隔

Question

有没有办法让 XY 闪电图以设定的间隔移动其 x 轴？

场景：我目前有一个 XY 图表，它与每秒发出数据的进程相关联。图表正确更新，但 xAxis 移动得非常快，然后暂停直到下一个事件。我希望在每一秒间隔之间使这个过程更加顺畅。

我过去使用过 Apex 图表，这里是一个显示逐渐添加 xAxis 的示例：https://apexcharts.com/javascript-chart-demos/line-charts/realtime/

有没有办法让 lightningcharts 以同样的方式运行？

Answer 1

默认情况下，轴滚动是瞬时的或动画的（以相当活泼的方式）。动画速度不可自定义。

如果您想复制此滚动行为，则必须 1) 禁用自动滚动和 2) 手动设置轴滚动的每个步骤的动画。

Axis.setScrollStrategy

禁用自动滚动

轴间距可以用Axis.setInterval

设置

下面是一个代码片段，您可以在浏览器中运行查看它的外观，也可以在您自己的应用程序中引用。

const {
  lightningChart
} = lcjs

const chart = lightningChart().ChartXY()
const series = chart.addLineSeries({dataPattern: {pattern: 'ProgressiveX'}})
const axisX = chart.getDefaultAxisX()
   // Disable automatic scrolling
   .setScrollStrategy(undefined)
   // Default axis mouse interactions can't be used while scrolling is maintained manually
   .setMouseInteractions(false)
const xIntervalSize = 100

const addData = (yValues) => {
   series.addArrayY(yValues)
}

// Setup real-time data streaming every 1 seconds.
setInterval(() => {
   const newYValues = new Array(10).fill(0).map(_ => Math.random())
   addData(newYValues)
}, 1000)

// Animate x axis scrolling manually.
const xStepPerFrame = 
  // New points count per 1 second
  10 /
  // 60 frames per second (axis is stepped every frame for smoothness)
  60

const stepAxisX = () => {
  const xCur = axisX.getInterval().end
  const xMax = series.getXMax()
  const xNext = Math.min(xCur + xStepPerFrame, xMax)
  if (xNext !== xCur) {
     axisX.setInterval(xNext - xIntervalSize, xNext)
  }
  requestAnimationFrame(stepAxisX)
}
stepAxisX()

<script src="http://unpkg.com/@arction/lcjs@3.3.0/dist/lcjs.iife.js"></script>

Progressive xAxis - 定时间隔

Progressive xAxis - Timed Interval

lightningchart