拟合到 x 轴的显示点

Question

>我正在尝试向图表XY添加一组点，但图表未正确绘制。Y 值似乎与轴拟合良好，但 x 值并非如此。该系列像一条线一样显示在图表的中间。

生成图表并添加点的代码如下：

this.chart1 = lightningChart().ChartXY({ containerId: this.chartId1, defaultAxisXTickStrategy: AxisTickStrategies.Numeric })
.setBackgroundFillStyle(new SolidFill({color: ColorHEX( '#C6C2C1' )}))
.setChartBackgroundFillStyle(new SolidFill({color: ColorHEX( '#FFFFFF' )}))
.setTitle('LightningCharts 1')
.setTitleFillStyle(new SolidFill({color: ColorHEX( '#000000' )}));
// Fijo las propiedades del eje y
this.chart1.getDefaultAxisY()
.setTitle('mV')
.setScrollStrategy(AxisScrollStrategies.fitting)
.setAnimationScroll(false)
.fit(true)
.setAnimationZoom(undefined)
.setTitleFillStyle(new SolidFill({color: ColorHEX( '#000000' )}))
.setTickStyle(new VisibleTicks({ labelFillStyle: new SolidFill({ color: ColorHEX('#000000')}), tickLength: 20 }));
// Fijo las propiedades del eje x
this.chart1.getDefaultAxisX()
.setTitle('milliseconds')
.setScrollStrategy(AxisScrollStrategies.fitting)
.setAnimationScroll(false)
.fit(true)
.setAnimationZoom(undefined)
.setTitleFillStyle(new SolidFill({color: ColorHEX( '#000000' )}))
.setTickStyle(new VisibleTicks({ labelFillStyle: new SolidFill({ color: ColorHEX('#000000')}) }));
// Añado las series al chart
// tslint:disable-next-line:max-line-length
this.lineSeries1 = this.chart1.addPointLineSeries({ dataPattern: DataPatterns.horizontalProgressive, xAxis: this.chart1.getDefaultAxisX() })
.setName('Serie 1')
.setStrokeStyle( new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorHEX( '#E72B1C' ) })
}))
.setMouseInteractions(false);

this.lineSeries1.add(this.points);

以及我用这段代码生成的点数组：

this.points = [];
// const sign = Math.floor(Math.random() * (1 + 1)) === 0 ? -1 : 1;
const firstX = Date.now();
for (let i = 0; i < 4000; i++) {
const point = {
x: firstX + (i * 1000),
y: Math.floor(Math.random() * (5000 + 1))
};
this.points.push(point);
}

如何查看 x 轴中拟合的数据？

Answer 1

LightningChart JS目前不能很好地支持Axis上如此大的数字。处理大数字时，轴间隔有限制。

您可以通过从 0 开始 X 轴值或编辑数值轴刻度策略来解决此问题。

---

编辑即时报价策略没有得到很好的支持，将来会发生变化，但现在可以完成。

首先，您需要确保图表是使用数字轴刻度策略的副本创建的。

const chart1 = ChartXY({
defaultAxisXTickStrategy: Object.assign({}, AxisTickStrategies.Numeric)
})

Object.assign是这里的关键。这将创建数值轴即时报价策略的副本。

现在图表已经创建，可以编辑逐笔报价策略了。

chart1.getDefaultAxisX().tickStrategy.formatValue = (value, range) => {
return (offset + value).toFixed(0)
}

使用此代码，offset将添加到显示的值中。此偏移量不应存在于数据本身中，仅在显示数据时添加。当LightningChart JS显示数据时，总是调用formatValue函数。

有关完整实现，请参阅下面的代码片段。

const points = [];
// const sign = Math.floor(Math.random() * (1 + 1)) === 0 ? -1 : 1;
const firstX = 0;
const offset = Date.now()
for (let i = 0; i < 4000; i++) {
const point = {
x: firstX + (i * 1000),
y: Math.floor(Math.random() * (5000 + 1))
};
points.push(point);
}
const {
lightningChart,
SolidFill,
AxisTickStrategies,
VisibleTicks,
ColorHEX,
AxisScrollStrategies,
DataPatterns,
SolidLine
} = lcjs
const chart1 = lightningChart().ChartXY({
containerId: 'target',
defaultAxisXTickStrategy: Object.assign({}, AxisTickStrategies.Numeric)
})
.setBackgroundFillStyle(new SolidFill({ color: ColorHEX('#C6C2C1') }))
.setChartBackgroundFillStyle(new SolidFill({ color: ColorHEX('#FFFFFF') }))
.setTitle('LightningCharts 1')
.setTitleFillStyle(new SolidFill({ color: ColorHEX('#000000') }));
chart1.getDefaultAxisX().tickStrategy.formatValue = (value, range) => {
return (offset + value).toFixed(0)
}
// Fijo las propiedades del eje y
chart1.getDefaultAxisY()
.setTitle('mV')
.setScrollStrategy(AxisScrollStrategies.fitting)
.setAnimationScroll(false)
.fit(true)
.setAnimationZoom(undefined)
.setTitleFillStyle(new SolidFill({ color: ColorHEX('#000000') }))
.setTickStyle(new VisibleTicks({ labelFillStyle: new SolidFill({ color: ColorHEX('#000000') }), tickLength: 20 }));
// Fijo las propiedades del eje x
chart1.getDefaultAxisX()
.setTitle('milliseconds')
.setScrollStrategy(AxisScrollStrategies.fitting)
.setAnimationScroll(false)
.fit(true)
.setAnimationZoom(undefined)
.setTitleFillStyle(new SolidFill({ color: ColorHEX('#000000') }))
.setTickStyle(new VisibleTicks({ labelFillStyle: new SolidFill({ color: ColorHEX('#000000') }) }));
// Añado las series al chart
// tslint:disable-next-line:max-line-length
const lineSeries1 = chart1.addPointLineSeries({ dataPattern: DataPatterns.horizontalProgressive, xAxis: chart1.getDefaultAxisX() })
.setName('Serie 1')
.setStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorHEX('#E72B1C') })
}))
.setMouseInteractions(false);
lineSeries1.add(points);

body {
height: 100vh;
}

<script src="https://unpkg.com/@arction/lcjs@1.2.2/dist/lcjs.iife.js"></script>
<div style="height: 100%;" id="target"></div>