显示适合 x 轴的点

Question

我正在尝试向 chartXY 添加一组点，但图表绘制不正确。 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 目前不能很好地支持轴上如此大的数字。处理大数时轴间隔有限制。

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

编辑分时策略未得到很好的支持，将来会更改，但现在可以完成。

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

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>

显示适合 x 轴的点

Display points fitted to x Axis

javascript

lightningchart