渐进式x轴-定时间隔

Question

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

场景：我目前有一个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>