Отображение точек, установленных на оси X - PullRequest
Новая
       88

Отображение точек, установленных на оси X

0 голосов
/ 24 января 2020

Я пытаюсь добавить массив точек на диаграмму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);

И массив точек I´m создание с помощью этого кода: 

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?

1 Ответ

0 голосов
/ 24 января 2020

LightningChart JS в настоящее время не может поддерживать такие большие числа на оси хорошо. При работе с большими числами существует ограничение на интервал оси.

Вы можете обойти эту проблему, запустив значения оси X с 0 или отредактировав тактовую стратегию оси Numeri c.

Редактирование стратегии тиков не очень хорошо поддерживается и изменится в будущем, но сейчас это можно сделать.

Сначала необходимо убедиться, что график создан с копией Numeri c AxisTickStrategy. 

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

Ключ Object.assign здесь. Это создаст копию стратегии тиков оси Numeri c.

Теперь, когда диаграмма создана, можно редактировать стратегию тиков. 

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

С этим кодом offset добавляется к отображаемым значениям. Это смещение не должно существовать в самих данных, оно добавляется только при отображении данных. Функция formatValue вызывается всегда, когда данные отображаются LightningChart 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>
...