过去密谋

Question

以可扩展方式扩展迹线时，将在过去绘制点。如图所示，任何

Picture of the problem

该图表现在由两部分组成，右边是数据库中的数据，左边是“实时”绘制的数据。即使时间戳在数据库中之后，实时绘制的数据仍在数据库中的左侧。

控制台日志上的时间戳是正确的，但是在X轴上错误地将它们放置在错误的时间。应当在图表的末尾绘制。

updateData (sensorData) {
    if (!this.initiated || !this.isLiveData) {
        return
    }

    let y = []
    let i = 0
    let x = []
    let traces = []
    for (let sensor in this.configuration) {
        for (let signal in this.configuration[sensor]) {
            let xDate = new Date(sensorData[sensor].timestamp)

            if (sensorData.hasOwnProperty(sensor) && sensorData[sensor].hasOwnProperty(signal)) {
                y.push([sensorData[sensor][signal]])
                x.push([xDate.getTime()])
            }
            // x time seems to be good here
            console.log('Update data', xDate.getTime(), xDate)

            traces.push(i)
            i++
        }
    }

    console.log('Plotting', y, x, this.widget.getXRange())
    if (y.length > 0) {
        this.$plotly.extendTraces('plotly-chart', {
            y: y,
            x: x
        }, traces)
    }
},

来自数据库的数据使用以下代码添加。

updateFromDb (sensorData) {
    let data = []
    let x = []
    let yData = {}

    for (let sensor in this.configuration) {
        for (let i = 0, len = sensorData[sensor].length; i < len; i++) {
            let timestamp = sensorData[sensor][i].timestamp
            x.push(timestamp)

            for (let source in this.configuration[sensor]) {
                let name = sensor + ' ' + getSignalName(source, this.angleLabel)

                if (!yData.hasOwnProperty(name)) {
                    yData[name] = {
                        data: [],
                        color: this.configuration[sensor][source].color
                    }
                }

                if (!sensorData[sensor][i].hasOwnProperty(source)) {
                    yData[name].data.push(0)
                } else {
                    yData[name].data.push(sensorData[sensor][i][source])
                }

                if (this.configuration[sensor][source].hasOwnProperty('yaxis')) {
                    yData[name]['yaxis'] = 'y' + this.configuration[sensor][source].yaxis
                }
            }
        }
    }

    for (let name in yData) {
        let sensorData = {
            name: name,
            x: x,
            y: yData[name].data,
            type: 'line',
            mode: 'lines',
            line: {
                width: 2,
                color: yData[name].color
            },
            marker: {
                width: 2,
                color: yData[name].color
            }
        }

        if (yData[name].hasOwnProperty('yaxis')) {
            sensorData['yaxis'] = yData[name].yaxis
        }
        data.push(sensorData)
    }

    this.$plotly.react(
        document.getElementById('plotly-chart'),
        data,
        this.getLayout(false),
        this.chartProperties
    )
}

还有一个功能，每隔50毫秒在xaxis上滚动一次窗口，使它看起来更平滑。

windowScroller () {
    if (!this.initiated || !this.isLiveData) {
        return
    }

    let timeDifference = 0
    if (this.timeDifference !== null) {
        timeDifference = this.timeDifference
    }

    /**
     * Make sure the line never gets behind the scroller.
     */
    if (Object.keys(this.latestPoint).length > 0) {
        let latestTime = this.latestPoint[Object.keys(this.latestPoint)[0]].timestamp
        let scrollDiff = new Date().getTime() - latestTime
        if (scrollDiff !== this.scrollDelay && this.lastDelayTime !== latestTime && scrollDiff < 60000) {
            this.lastDelayTime = latestTime
            this.scrollDelay = scrollDiff
            // console.log('update scroll', scrollDiff, 'from', latestTime)
        }
    }

    let currentTime = new Date().getTime() - timeDifference - this.scrollDelay
    let firstTime = new Date().getTime() - this.getMilisecondsFromMinutes(this.widget.getXRange()) - timeDifference - this.scrollDelay
    let relayoutPromise = new Promise((resolve, reject) => {
        this.$plotly.relayout('plotly-chart', {
            xaxis: {
                color: '#fff',
                type: 'date',
                range: [firstTime, currentTime]
            }
        })
    })

    relayoutPromise.then(() => {
        console.log('relayout')
    })

    let data = document.getElementById('plotly-chart').data

    // We calculate the max points using 4 hertz
    let maxPoints = (this.getSecondsFromMinutes(this.widget.getXRange()) + 10) * this.widget.getRefreshRate()

    if (this.minMax) {
        maxPoints = maxPoints * 2
    }
    for (let i in data) {
        if (data[i].y.length >= maxPoints) {
            data[i].y.shift()
            data[i].x.shift()
        }
    }
}