0

我正在尝试向 chartXY 添加点数组，但图表未正确绘制。Y 值看起来很适合 Axis，但 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 轴的数据？

4

1 回答 1

1

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

您可以通过从 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将添加到显示的值中。此偏移量不应存在于数据本身中，仅在显示数据时添加。formatValueLightningChart JS 显示数据时始终调用该函数。

请参阅下面的代码片段以获取完整的实现。

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>

于 2020-01-24T15:11:01.290 回答