我正在尝试为科学数据编写实时数据显示。我有一台服务器，它正在将数据记录到一个文件中，所以我不在乎保持值超过大约15分钟。我还没有找到一种方法来投掷超过15分钟前的数据点，并且不重置整个图表。重置图表不是一个选项，因为能够看到最近的值对该设备的运行至关重要。我尝试过的东西：
注意：这使用"中的websocket；"推"；模式
- 这开始于尝试有一个固定宽度(15分钟(的预览窗口，用户可以在数据中拖动。但我很快发现使用预览似乎与实时数据流不兼容
- 我试着摆弄
refresh对象选项，但当图表重置时，这些选项就会改变 - 我目前的尝试是试图抓住"；addnode"；事件，当websocket处理程序添加节点时，但根据我所知，该事件从未被触发
我的图表对象的当前迭代如下：
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
})
}
});
我目前正在从出现故障的websocket端点获取数据，因为Web服务器还没有编写好，因为我想先准备好最难的部分，即UI。感谢您提供的任何帮助。
在refresh对象中，添加'preserve-data': false。这似乎是不直观的，但这将在达到最大刻度阈值后保留数据，而不是清除图表。