在Lightningchart中滚动时在右侧填充

Question

下面是我创建的图表，我想在动态图表水平滚动时在右侧添加填充。

这是我的代码，可将数据更新为图表

setInterval(function(){updateChart()}, 100); 
var updateChart = function () {        
if(xVal > 160) return false;
chart.getDefaultAxisX().setInterval(xVal-100, xVal+2)
yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
series.add({ x: xVal, y: yVal})
seriestwo.add({ x: xVal, y: yVal+500})
xVal++;
// update chart after specified time. 
};

在每次更新时，我都会致电此行以实现我现在需要的功能。

chart.getDefaultAxisX().setInterval(xVal-100, xVal+2)

这在某种程度上动摇了图表并且不平滑，我如何实际添加填充，我正在检查所有文档，但未找到任何内容。

你们可以在这里玩-https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0150-ecg.html

Answer 1

当前没有内置的支持来对滚动进行填充。

您尝试执行的操作可用于实现所需的结果，只需稍作更改即可。

动摇来自图表，它试图基于滚动策略对新数据进行滚动。要使图表无法尝试滚动图表，可以将滚动策略设置为undefined。 chart.getDefaultAxisX().setScrollStrategy(undefined)只需在设置图表时执行一次。 https://www.arction.com/lightningchart-js-api-documentation/v1.3.0/classes/axis.html#setscrollstrategy

此更改后，图表不再晃动，但滚动不流畅。为了获得平滑的滚动效果，您可以在setInterval调用中添加第三个参数。此参数控制滚动是否应设置动画，将其设置为true可以设置更改间隔的动画效果，并使滚动更流畅。 https://www.arction.com/lightningchart-js-api-documentation/v1.3.0/classes/axis.html#setinterval

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    DataPatterns,
    AxisScrollStrategies,
    SolidLine,
    SolidFill,
    ColorHEX,
    AutoCursorModes
} = lcjs

// Import data-generators from 'xydata'-library.
// Create a XY Chart.
const chart = lightningChart().ChartXY()

// Add line series to visualize the data received
const series = chart.addLineSeries()
const seriestwo = chart.addLineSeries()

chart.getDefaultAxisX()
    .setScrollStrategy(undefined)
    // remove this line if you would prefer to animate the initial x axis interval
    .setInterval(-100, 20, false)

let xVal = 0
let yVal = 0
setInterval(function () { updateChart() }, 100);
var updateChart = function () {
    if (xVal > 160) return false;
    chart.getDefaultAxisX().setInterval(xVal - 100, xVal + 20, true)
    yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
    series.add({ x: xVal, y: yVal })
    seriestwo.add({ x: xVal, y: yVal + 500 })
    xVal++;
    // update chart after specified time. 
};

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