下面是我创建的图表,我想在动态图表水平滚动时在右侧添加填充。
这是我的代码,用于将数据更新到图表
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
发布于 2020-04-29 19:05:27
目前还没有内置的支持来对滚动进行填充。
你尝试做的事情可以用来达到想要的结果,只需要做一些细微的改变。
抖动来自于试图基于滚动策略在新数据上进行滚动的图表。要禁止图表尝试滚动图表,可以将滚动策略设置为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>
https://stackoverflow.com/questions/61447332
复制相似问题