首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Lightningchart中滚动时在右侧填充

在Lightningchart中滚动时在右侧填充
EN

Stack Overflow用户
提问于 2020-04-27 04:05:34
回答 1查看 132关注 0票数 2

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

这是我的代码,用于将数据更新到图表

代码语言:javascript
运行
复制
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. 
};

在每次更新时,我都会调用这条线路来实现我现在需要的东西。

代码语言:javascript
运行
复制
chart.getDefaultAxisX().setInterval(xVal-100, xVal+2)

这有点抖动图表,并不流畅,我如何实际添加填充,我检查了所有的文档,但没有发现任何东西。

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

EN

回答 1

Stack Overflow用户

发布于 2020-04-29 19:05:27

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

你尝试做的事情可以用来达到想要的结果,只需要做一些细微的改变。

抖动来自于试图基于滚动策略在新数据上进行滚动的图表。要禁止图表尝试滚动图表,可以将滚动策略设置为undefinedchart.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

代码语言:javascript
运行
复制
// 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. 
};
代码语言:javascript
运行
复制
<script src="https://unpkg.com/@arction/lcjs@1.3.0/dist/lcjs.iife.js"></script>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61447332

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档