javascript - 点在 flotJS 中未按给定时间间隔更新:Javascript
问题描述
所以我正在flotjs
使用随机数据生成绘制图表。该图表工作正常且流畅。但是问题出现在图表数据点渲染的速度上。我想要的是在一秒钟内生成超过 100 个点(准确地说是 125 个),这就是为什么我将updataInterval
变量设置为1000/130
.
因此,根据计算,应在一秒钟内显示 130 个点。但是我可以看到控制台以及图表渲染。绘图速度似乎非常慢。每秒大约 40 到 50 个点。
我确切地希望图表在 1 秒内绘制大约 125 个点。
到目前为止,我尝试使用的来源是......
$(function () {
var data = [];
var dataset;
var totalPoints = 1000;
var updateInterval = 8;
var now = new Date().getTime();
var startDate = new Date().getTime();
for (var i = 0; i < totalPoints; i++) {
data.push([now - (totalPoints - i) * updateInterval, null]);
}
function GetData() {
if (data.length > totalPoints) {
data.shift();
}
var y = Math.random() * 100;
var temp = [now += updateInterval, y];
console.log(temp);
data.push(temp);
}
var options = {
series: {
lines: {
show: true,
lineWidth: 1,
// fill: true
}
},
xaxis: {
mode: "time",
tickSize: [2, "second"],
tickFormatter: function (v, axis) {
var date = new Date(v);
if (date.getTime() < startDate) {
return "";
} else if (date.getSeconds() % 20 == 0) {
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return hours + ":" + minutes + ":" + seconds;
} else {
return "";
}
},
axisLabel: "Time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
min: 0,
max: 100,
tickSize: 5,
tickFormatter: function (v, axis) {
if (v % 10 == 0) {
return v + "%";
} else {
return "";
}
},
axisLabel: "CPU loading",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
labelBoxBorderColor: "#fff"
},
grid: {
backgroundColor: "#000000",
tickColor: "#008040"
}
};
$(document).ready(function () {
GetData();
dataset = [{
label: "CPU",
data: data,
color: "#00FF00"
}];
$.plot($("#placeholder"), dataset, options);
function update() {
GetData();
$.plot($("#placeholder"), dataset, options)
setTimeout(update, 1000/130);
}
update();
});
});
我还为它创建了一个小提琴。
如您所见,上面的代码。我将更新间隔设置为1000/130
在一秒钟内绘制 130 个数据点。但是数据渲染比预期的要慢得多。
请帮帮我,如果这在 flotjs 图表库中是可能的。如果不是,我愿意接受任何其他图表库建议,前提是数据流可视化应该与上面的小提琴示例相同。
解决方案
有很多技巧可以提高刷新速度,比如使用requestAnimationFrame
代替setTimeout
(为什么 requestAnimationFrame 比 setInterval 或 setTimeout 更好),或者在尝试刷新之前计算所有点(有两种不同的逻辑,也许你应该在代码中将它们分开)。
主要的改进是在每次刷新时不创建新图,而只刷新现有的,如您在此主题上所示:Refresh/Reload Flot In Javascript
推荐阅读
- ios - 如何验证资产(在颤振插件中)在 iOS 中是否可用
- architecture - 我可以在微服务架构中使用 BizTalk 作为消息代理吗?
- django - 如何根据 django 模板中的不同提交按钮在更新视图中自定义成功 url?
- java - 嵌入 Tomcat 9 以执行 @PostConstruct
- photoshop - Photoshop - 如何将矩形选框工具放置在特定位置
- c# - 列表框计算器
- google-cloud-firestore - 以一定的时间间隔将数据从数据库发送到物联网设备
- pyspark - 根据列中的唯一值对 PySpark DataFrame 进行分区(自定义分区)
- angularjs - bash:http-server:找不到命令
- python - 创建自定义估计器:状态均值估计器