LightningChart JS - LineSeries /渐进X的腐败
我在LightningChart中遇到了一个有趣的问题，它似乎正在破坏或以其他方式破坏我的数据，这取决于它离图表的DateOrigin有多远。我的数据是每秒1000个样本，我试图一次显示1-2周的数据。我使用的是ChartXY类，x轴类型设置为“线性-高精度”，它应该有1ms的精度，这是我所需要的，我不再需要了，我正在创建一个LineSeries，它的数据模式是'ProgressiveX‘和regularProgressiveStep: true。
下面是在DateOrigin附近绘制数据时的样子。
下面是对DateOrigin附近数据的放大效果。
看上去太棒了！闪电图就像我想做的那样！
然而，我希望这些数据被正确地抵消，以表明它是真正的绝对时间。
这是当我用14天来抵消这些数据时的样子。我设置相对偏移量的代码如下所示。
ds.addArrayY(curve.data,step=1,start=14*24*60*60*1000)
好的，看起来没问题，但是如果我们放大呢？
已经消失了！看起来X轴的值被胁迫到X轴的更大的一步。离DateOrigin越远，情况就越糟。我担心的是，这是一些内置的行为引擎，我期望太多，然而，它说，它有1ms的分辨率，所以我希望得到尊重。
这是我创建图表的方法。
// Create a Line Chart.
const PumpsChart = lightningChart().ChartXY({
// Set the chart into a div with id, 'target'.
// Chart's size will automatically adjust to div's size.
theme: Themes.lightGradient,
container: 'PumpsChart',
defaultAxisX: {
type: 'linear-highPrecision'
}
}).setTitle('') // Set chart title
.setTitleFont(new FontSettings({
family: waveChartFontFamily,
size: 20
}))
.setMouseInteractionWheelZoom(false)
axisPumpsChartDateTime = PumpsChart.getDefaultAxisX()
.setTickStrategy(
AxisTickStrategies.DateTime,
(tickStrategy) => tickStrategy.setDateOrigin(waveDateOrigin))
axisPumpsChartPressurePSI = PumpsChart.getDefaultAxisY()
.setTitle("Pressure (PSI)")
.setInterval(0,10000,0,true)下面是我如何创建LineSeries
newDataSeries = targetChart.chart.addLineSeries(
{
yAxis: targetChart.axis,
dataPattern: {
pattern: 'ProgressiveX',
regularProgressiveStep: true,
}
}
);下面是我如何将数据添加到图表中：
ds.addArrayY(curve.data,step=1,start=14*24*60*60*1000)出于几个原因，我不喜欢使用AxisTickStrategies.DateTime over AxisTickStrategies.DateTime，我的数据持续数周，100个小时太少，我只是对毫秒分辨率很好，我不需要更多，我需要在相对的时间而不是绝对的时间内显示我的数据。
希望有一些参数，我错过了，我可以调整，以实现这一点。
编辑
嗯，当数据相对于原点-636小时时，时间滴答策略也会发生这种破坏。我尝试过这一点，无论是否将ProgressiveX设置为DataPattern.pattern。
编辑2*
嗯，我甚至尝试了downSampling每秒20个样本，并将其改为AxisTickStrategies.DateTime，由于某种原因，它“挤压”了这个神奇的.25秒间隔的所有点。
回答 2
Stack Overflow用户
发布于 2022-09-12 05:43:45
我试图在类似的情况下生成一个参考应用程序--使用具有高分辨率时间数据(1000 Hz)的DateTime滴答。下面的代码段应该以堆栈溢出的形式打开，生成一组相当大的测试数据(可能需要一段时间)，并使用日期原点显示高缩放范围。
这个对你有用吗？如果是的话，那么您的应用程序中可能有一些不正确的地方，您可以借助这个参考应用程序来发现它。
const { lightningChart, AxisTickStrategies } = lcjs
const { createProgressiveTraceGenerator } = xydata
createProgressiveTraceGenerator()
.setNumberOfPoints(1000 * 60 * 60 * 4)
.generate()
.toPromise()
.then((data) => {
// Just for generating data set
const dataStart = Date.now()
return data.map((p) => ({ x: dataStart - 1000 * 60 * 60 * 4 + p.x, y: p.y }))
})
.then((data) => {
// 1. Offset data X by date origin
const dateOrigin = new Date()
const tDateOrigin = dateOrigin.getTime()
data = data.map((p) => ({ x: p.x - tDateOrigin, y: p.y }))
const chart = lightningChart().ChartXY({ disableAnimations: true })
const axisX = chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (ticks) =>
ticks
// 2. Inform Tick Strategy of date origin
.setDateOrigin(dateOrigin),
)
const series = chart.addLineSeries({
dataPattern: {
pattern: 'ProgressiveX',
regularProgressiveStep: true,
},
})
series.add(data)
chart.addLegendBox().add(chart)
})<script src="https://unpkg.com/@arction/lcjs@3.4.0/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/@arction/xydata@1.2.1/dist/xydata.iife.js"></script>
回顾你的问题，也许最初的问题是关于滴答格式的？当你放大这个例子的时候，它最终只显示了每一个滴答的几秒钟，而不是一个完整的时间。这就是问题所在吗？如果是的话，那么问题是格式化轴滴答，我要看看能做些什么。
Stack Overflow用户
发布于 2022-11-24 18:51:32
会不会是32位浮点精度损失？两周的秒等于1 209 600，和log2(1_209_600) = 20.2 = 21 bits的存储空间。32位二进制浮点数的尾数仅为23位，剩下2位作为分数部分，这将解释0.25的增量。
所以如果我是对的，你需要把X位置的精度提高到64位浮点数。不过，您已经在使用轴模，这将是我对解决方案的第一猜测，因此据我所知，它实际上并没有将数据精度提高到64位，只有轴。除非我错过了另一种解决方案，否则您可能需要将数据分成不同的系列。
编辑：--现在我已经查过了，我不确定这是否是闪电图的最后一个问题。OpenGL ES 3.0 ( WebGL 2所依赖的，反过来又依赖于LightningChart) 要求“高精度”浮动参数存储在binary32 IEEE 754标准浮标中。。
高位浮点值以IEEE 754单精度浮点格式存储。中间值和低浮点值具有最小范围和精度要求，详细说明如下所示，并具有IEEE 754定义的最大范围和精度。
因此，考虑到这些信息，它似乎是LCjs中的一个bug，导致了WebGL技术的限制。
https://stackoverflow.com/questions/73657005
复制相似问题
腾讯云开发者
