2

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

在此处输入图像描述

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

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

4

1 回答 1

0

目前没有内置支持来填充滚动。

您尝试做的事情可以用来达到预期的结果，它只需要一些细微的改变。

抖动来自图表试图根据滚动策略对新数据进行滚动。要禁止图表尝试滚动图表，您可以将滚动策略设置为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>

于 2020-04-29T11:05:27.370 回答