Точки отображения соответствуют оси 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);
}

Как я могу увидеть данные, расположенные по оси X?


javascript lightningchart
person jcm    schedule 24.01.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

Object.assign является ключевым здесь. Это создаст копию стратегии тиков числовой оси.

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

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/[email protected]/dist/lcjs.iife.js"></script>
<div style="height: 100%;" id="target"></div>

person Snekw    schedule 24.01.2020
comment
Почему плохо поддерживается и как в будущем буду решать проблему с большими числами? Идея состоит в том, чтобы использовать js-библиотеку lightningChart в серьезном проекте, и мне нужно что-то, что хорошо работает сейчас и в будущем, и если мне придется что-то изменить в будущем, это должно быть простое решение. - person jcm; 27.01.2020
comment
Показанный метод будет работать во всех версиях LightningChart JS v1.x.x. Таким образом, метод будет безопасен для использования со всеми дополнительными выпусками и исправлениями LightningChart JS. В будущем, с основным выпуском (v2.0.0), способ установки formattingFunction немного изменится. Скорее всего, он будет иметь функцию установки. Сама функциональность останется прежней, просто другой способ настройки функции форматирования. - person Snekw; 27.01.2020