javascript - 仅使用 ZingChart 显示最近收到的 n 个数据点，而无需重置

问题描述

我正在尝试为科学数据编写实时数据显示。我有一个将数据记录到文件中的服务器，所以我不关心将值保持在大约 15 分钟的窗口之后。我还没有找到一种方法既可以扔掉 15 分钟前的数据点，也不会重置整个图表。重置图表不是一种选择，因为能够查看最近的值对于该设备的操作至关重要。我尝试过的事情：

注意：这在“推送”模式下使用 websocket。

这开始是试图拥有一个固定宽度（15 分钟）的预览窗口，用户可以在数据上拖动。但我很快发现使用预览似乎与实时数据流不兼容。
我尝试摆弄refresh对象选项，但是当图表重置时，这些选项只会改变。
我当前的尝试是在 websocket 处理程序添加节点时尝试捕获“addnode”事件，但据我所知，该事件永远不会被触发。

我的图表对象的当前迭代如下：

let chartConfig = {
    graphset: [
            {
        timezone: -1 * (today.getTimezoneOffset() / 60), // Weird timezone stuff
        type: 'line',
        borderColor: '#cccccc',
        borderRadius: '2px',
        borderWidth: '1px',
        utc: true,
        title: {
            text: title,
            adjustLayout: true,
            marginTop: '20px'
        },
        legend: {
            backgroundColor: 'transparent',
            borderWidth: '0px',
            draggable: true,
            header: {
                text: test,
                backgroundColor: '#f0f0f0'
            },
            item: {
                margin: '5 17 2 0',
                padding: '3 3 3 3',
                cursor: 'hand',
                fontColor: '#fff'
            },
            marker: {
                visible: false
            },
            verticalAlign: 'middle'
        },
        plot: {
            aspect: 'segmented',
        },
        plotarea: {
            margin: 'dynamic'
        },
        scrollX: {},
        scaleX: {
            autoFit: false,
            itemsOverlap: false,
            maxItems: 15,
            maxLabels: 15,
            step: "15minute",
            transform: {
                type: 'date',
                all: '%M-%dd-%Y<br>%G:%i',

            },
            guide: {
                    alpha: 0.5,
                    lineColor: "#cccccc",
                    lineWidth: 2,
                    lineStyle: "solid",
                    visible: true
            },
            zooming: true
        },
        scaleY: {
            guide: {
                lineStyle: 'solid'
            },
            offsetStart: "5%",
            offsetEnd: "5%",
            label: {
                text: 'Data'
            },
        },
        crosshairX: {
            lineColor: '#555',
            marker: {
                borderColor: '#fff',
                borderWidth: '1px',
                size: '5px'
            },
            plotLabel: {
                backgroundColor: '#fff',
                borderRadius: '2px',
                borderWidth: '2px',
                multiple: true
            },
            scaleLabel: {
                transform: {
                    type: "date",
                    all: "%G:%i:%s"
                }
            }
        },
        tooltip: {
            visible: false
        },
        refresh: {
            type: "feed",
            transport: "websockets",
            url: "wss://zingchart-websockets.glitch.me",
            method: "push",
            maxTicks: 15*60,
            resetTimeout: 15*60*10,
            adjustScale: false,
            curtain: {
                text: 'Starting Feed...',
                color: '#424242',
                fontSize: 45,
                backgroundColor: '#b3e5fc',
            }
        },
        series: [
            {
                text: 'plot0',
                values: [],
                legendItem: {
                    backgroundColor: '#29A2CC',
                    borderRadius: '2px',
                }
            },
        ]
        }
    ],
    gui: {
        contextMenu: {
        alpha: 0.9,
        button: {
            visible: true
        },
        docked: true,
        item: {
            textAlpha: 1
        },
        position: 'right'
        }
    }
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'PlotArea',
data: chartConfig,
});

// Callbacks
// --------------------------
zingchart.bind('PlotArea', 'addnode', function(e) {
    var cur_data = zingchart.exec('PlotArea', 'getseriesvalues', {});
    if (length(cur_data) > 2*60) {
        zingchart.exec('PlotArea', 'removenode', {
            graphid: 0,
            plotindex: 0,
            nodeindex: 0
        })
    }
});

我目前正在从 glitchme 的 websocket 端点获取数据，因为尚未编写 web 服务器，因为我想先准备好困难的部分，即 UI。感谢您提供的任何帮助。

标签： javascriptuser-interfacedata-visualizationzingchart

javascript - 仅使用 ZingChart 显示最近收到的 n 个数据点，而无需重置

问题描述

解决方案

推荐阅读