Как устранить проблемы с производительностью с помощью plotly js и получения данных в режиме реального времени с несколькими графиками на одной странице - PullRequest
Новая
       33

Как устранить проблемы с производительностью с помощью plotly js и получения данных в режиме реального времени с несколькими графиками на одной странице

0 голосов
/ 07 января 2019

Я создаю электронное приложение с помощью Vue и Plotly JS. Это приложение получает данные в реальном времени от разных датчиков. Я хочу показать данные датчиков в виде линейной диаграммы, созданной с помощью Plotly, потому что мне нужны функции масштабирования и панорамирования вне существующего диапазона данных.

Я хочу иметь 4 графика с 8 трассами.

Я получаю данные с частотой 4 Гц (4 раза в секунду) и обновляю графики при получении новых данных. У меня есть диапазон 5 минут, и каждая точка данных из этого диапазона удаляется из набора данных.

Когда у меня есть 1 график, все работает отлично. Но когда у меня более 1 графика, приложение работает медленно и графики не обновляются вовремя. Я использую скроллер, чтобы сгладить обновление графиков.

Я пробовал несколько способов обновить данные. Создание полного нового набора данных и обновление макета диаграмм и расширение трасс новыми точками данных и удаление точек данных, которые находятся за пределами диапазона. Согласно документации Plotly.js это путь. 

/**
* Updates the charts 
*/
updateData () {
    let y = []
    let i = 0
    let x = []
    let traces = []

    // Get the data for the sensors in the configuration of the chart
    for (let sensor in this.configuration) {
        for (let signal in this.configuration[sensor]) {
            if (this.latestPoint.hasOwnProperty(sensor) && this.latestPoint[sensor].hasOwnProperty(signal)) {
                y.push([this.latestPoint[sensor][signal]])
                x.push([this.latestPoint[sensor].timestamp])
            } else {
                x.push([this.latestPoint[sensor].timestamp])
                y.push([0])
            }

            traces.push(i)
            i++
        }
    }

    this.$plotly.extendTraces(this.widget.getChartId(), {
        y: y,
        x: x
    }, traces)
},
/**
 * Scroll the window for a smooth animation of the lines.
 * This method also removes the old data points outside of the window.
 * Methods is called every 16th of a second (60 times per second; 60fps)
 */
windowScroller () {
    let currentTime = new Date().getTime() - 5000
    let firstTime = new Date().getTime() - this.getMilisecondsFromMinutes(this.windowInMinutes) + 5000

    this.$plotly.relayout(this.widget.getChartId(), {
        xaxis: {
            range: [firstTime, currentTime]
        }
    })

    let data = document.getElementById(this.widget.getChartId()).data

    // We calculate the max points using 4 hertz
    let maxPoints = this.getSecondsFromMinutes(this.windowInMinutes) * this.hertz
    for (let i in data) {
        if (data[i].y.length >= maxPoints) {
            data[i].y.shift()
            data[i].x.shift()
        }
    }
},

Есть ли способ улучшить производительность с помощью Plotly.js? Или я должен использовать другую библиотеку диаграмм с функциями масштабирования и панорамирования вне текущего диапазона данных.

...