我正在尝试评估Plotly是否适合我的需求(具有〜250.000点的3D表面/散点图,每〜50ms会更新500个新点)。
由于我没有找到任何3D实时图表示例,因此我尝试了2D示例中使用的update / extendtraces方法。
使用update()可以正常运行,但似乎速度很慢,而且由于每次更新似乎都会重新绘制整个图,因此我无法绕行。
有什么方法可以加快这个过程吗?
这是我的代码,底部有更新功能:
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function (err, rows) {
function unpack(rows, key) {
return rows.map(function (row) {
return row[key];
});
}
var z_data = [];
for (i = 0; i < 24; i++)
{
z_data.push(unpack(rows, i));
}
var data = [{
z: z_data,
type: 'surface'
}];
var layout = {
title: 'Performance-Test',
autosize: true,
// width: 1920,
// height: 1080,
margin: {
l: 50,
r: 50,
b: 65,
t: 90
}
};
Plotly.newPlot('myDiv', data, layout);
Plotly.relayout('myDiv', 'scene.zaxis.range', [0, 500]);
Plotly.relayout('myDiv', 'scene.xaxis.range', [0, 500]);
Plotly.relayout('myDiv', 'scene.yaxis.range', [0, 500]);
setInterval(function () {
addValue();
// document.getElementById('cmax').innerHTML = 'Max: ' + data[0].cmax;
// document.getElementById('cmin').innerHTML = 'Min: ' + data[0].cmin;
// Plotly.extendTraces('myDiv', z_data[0], [0]);
// Plotly.addTraces('myDiv', z_data[0], [0]);
Plotly.update('myDiv', data, layout);
}, 40);
function addValue() {
var sample = [];
for (i = 0; i < 500; i++) {
sample.push(Math.floor(Math.random() * 100));
}
z_data.push(sample);
if (z_data.length > 500) {
z_data.shift();
}
}
});