Javascript 安装在x轴上的显示点

我正在尝试向图表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);
}

this.points=[]；
//常量符号=Math.floor（Math.random（）*（1+1））==0-1 : 1;
const firstX=Date.now（）；
for（设i=0；i<4000；i++）{
常数点={
x:firstX+（i*1000），
y:Math.floor（Math.random（）*（5000+1））
};
这个。点。推（点）；
}

---

如何查看x轴上的数据？

LightningChart JS目前无法很好地支持x轴上如此大的数据。在处理大量数据时，轴间隔有一个限制

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

---

编辑勾号策略没有得到很好的支持，将来会有所改变，但现在可以这样做

首先，您需要确保图表是使用AxisTickStrategy的副本创建的

const chart1=ChartXY({
defaultAxisXTickStrategy:Object.assign（{}，AxisTickStrategies.Numeric）
})

对象.assign

是这里的关键。这将创建数字轴刻度策略的副本

现在图表已经创建，可以编辑勾号策略

chart1.getDefaultAxisX（）.tickStrategy.formatValue=（值，范围）=>{
返回值（偏移量+值）.toFixed（0）
}

使用此代码，将向显示的值添加一个

偏移量

。此偏移量不应存在于数据本身中，它仅在显示数据时添加。LightningChart JS显示数据时，始终调用

formatValue

函数

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

const points=[]；
//常量符号=Math.floor（Math.random（）*（1+1））==0-1 : 1;
常数firstX=0；
const offset=Date.now（）
for（设i=0；i<4000；i++）{
常数点={
x:firstX+（i*1000），
y:Math.floor（Math.random（）*（5000+1））
};
点。推（点）；
}
常数{
光照图，
固体填料，
战略,，
可见蜱，
ColorHEX，
战略,，
数据模式，
实线
}=lcjs
常量chart1=lightningChart（）.ChartXY({
集装箱：“目标”，
defaultAxisXTickStrategy:Object.assign（{}，AxisTickStrategies.Numeric）
})
.setBackgroundFillStyle（新的SolidFill（{color:ColorHEX（'#C6C2C1'）}））
.setChartBackgroundFillStyle（新的SolidFill（{color:ColorHEX（'#FFFFFF'）}））
.setTitle（'LightningCharts 1'）
.setTitleFillStyle（新的SolidFill（{color:ColorHEX（'#000000'）}））；
图表1.getDefaultAxisX（）.tickStrategy.formatValue=（值，范围）=>{
返回值（偏移量+值）.toFixed（0）
}
//菲乔·拉斯普罗维达德斯德尔埃杰酒店
图表1.getDefaultAxisY（）
.setTitle（'mV'）
.setScrollStrategy（axisScrollStrategys.fitting）
.setAnimationScroll（错误）
.fit（正确）
.setAnimationZoom（未定义）
.setTitleFillStyle（新的SolidFill（{color:ColorHEX（'#000000'）}））
.setTickStyle（新的VisibleTicks（{labelFillStyle:new SolidFill（{color:ColorHEX（'#000000'）），tickLength:20}））；
//埃杰克斯大道
图表1.getDefaultAxisX（）
.setTitle（'毫秒'）
.setScrollStrategy（axisScrollStrategys.fitting）
.setAnimationScroll（错误）
.fit（正确）
.setAnimationZoom（未定义）
.setTitleFillStyle（新的SolidFill（{color:ColorHEX（'#000000'）}））
.setTickStyle（新的VisibleTicks（{labelFillStyle:newsolidfill（{color:ColorHEX（'#000000'）}））；
//Añado las系列铝图表
//tslint:禁用下一行：最大行长度
const lineSeries1=chart1.addPointLineSeries（{dataPattern:DataPatterns.horizontalProgressive，xAxis:chart1.getDefaultAxisX（）}）
.setName（'serie1'）
.setStrokeStyle（新实线）({
厚度：2，
fillStyle:newsolidfill（{color:ColorHEX（'#E72B1C'）}）
}))
.setMouseInteractions（错误）；
线条系列1.添加（点）
正文{
高度：100vh；
}

为什么没有得到很好的支持？将来我将如何解决大量数据的问题？我的想法是在一个严肃的项目中使用lighningChart js库，我需要一些现在和将来都能很好工作的东西，如果我将来必须改变它，它必须是一个简单的解决方案。我所展示的方法将在LightningChart js的所有v1.x.x版本中都能工作。因此，该方法可以安全地用于LightningChart JS的所有次要版本和补丁版本。在将来的主要版本（v2.0.0）中，formattingFunction的设置方式将有一点变化，它很可能有一个setter函数。功能本身将保持不变，只是设置格式化功能的方式不同。