Прокладка в правой части при прокрутке в Lightningchart - PullRequest
Новая
       111

Прокладка в правой части при прокрутке в Lightningchart

1 голос
/ 26 апреля 2020

Ниже приведена диаграмма, которую я создал, я хочу добавить заполнение справа, пока динамическая диаграмма c прокручивается горизонтально.

enter image description here

Это мой код, который обновляет данные на графике 

setInterval(function(){updateChart()}, 100); 
var updateChart = function () {        
if(xVal > 160) return false;
chart.getDefaultAxisX().setInterval(xVal-100, xVal+2)
yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
series.add({ x: xVal, y: yVal})
seriestwo.add({ x: xVal, y: yVal+500})
xVal++;
// update chart after specified time. 
};

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

chart.getDefaultAxisX().setInterval(xVal-100, xVal+2)

Это несколько встряхивает график и не гладко, как я на самом деле добавляю отступы, я проверял всю документацию, но ничего не нашел.

Вы, ребята, можете поиграть здесь - https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0150-ecg.html

1 Ответ

0 голосов
/ 29 апреля 2020

В настоящее время нет встроенной поддержки для прокрутки.

То, что вы пытались сделать, может быть использовано для достижения желаемого результата, ему просто нужно внести небольшие изменения.

Трясение происходит от графика, пытающегося прокрутить новые данные на основе прокрутки. стратегия. Чтобы отключить попытку прокрутки графика, вы можете установить стратегию прокрутки на undefined. chart.getDefaultAxisX().setScrollStrategy(undefined) это нужно сделать только один раз при настройке графика. https://www.arction.com/lightningchart-js-api-documentation/v1.3.0/classes/axis.html#setscrollstrategy

С этим изменением диаграмма больше не дрожит, но прокрутка не плавная. Чтобы получить плавную прокрутку, вы можете добавить третий аргумент к вызову setInterval. Этот аргумент контролирует, должна ли прокрутка быть анимированной или нет, если установить значение true, анимировать изменяющийся интервал и получить более плавную прокрутку. https://www.arction.com/lightningchart-js-api-documentation/v1.3.0/classes/axis.html#setinterval

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    DataPatterns,
    AxisScrollStrategies,
    SolidLine,
    SolidFill,
    ColorHEX,
    AutoCursorModes
} = lcjs

// Import data-generators from 'xydata'-library.
// Create a XY Chart.
const chart = lightningChart().ChartXY()

// Add line series to visualize the data received
const series = chart.addLineSeries()
const seriestwo = chart.addLineSeries()

chart.getDefaultAxisX()
    .setScrollStrategy(undefined)
    // remove this line if you would prefer to animate the initial x axis interval
    .setInterval(-100, 20, false)

let xVal = 0
let yVal = 0
setInterval(function () { updateChart() }, 100);
var updateChart = function () {
    if (xVal > 160) return false;
    chart.getDefaultAxisX().setInterval(xVal - 100, xVal + 20, true)
    yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
    series.add({ x: xVal, y: yVal })
    seriestwo.add({ x: xVal, y: yVal + 500 })
    xVal++;
    // update chart after specified time. 
};
<script src="https://unpkg.com/@arction/lcjs@1.3.0/dist/lcjs.iife.js"></script>
...