使用JSPlot进行实时渲染
使用JSPlot进行实时渲染
提问于 2013-04-17 13:09:15
我也开始使用JQPlot来实时绘制图形了。我有一个示例，它将只使用两个数据来绘制图形-
var storedData = [70, 10];然后我添加了一个按钮，如果我点击这个按钮，它将开始渲染更多的数据。基本上，你可以说就像来自服务器的实时数据-
但是我现在面临的问题是，当我点击Start Updates按钮的时候，它没有画出任何东西。所以我相信，我搞乱了按钮点击的事情。我在Javascript和HTML上工作了很长时间，所以我忘记了很多事情。
下面是我的代码-
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="examples.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="colmask leftmenu">
<div class="colleft">
<div class="col1" id="example-content">
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>Start Updates</button>
<script class="code" type="text/javascript">
$(document).ready(function(){
var storedData = [70, 10];
var plot1;
renderGraph();
$('button').click( function(){
doUpdate();
$(this).hide();
});
function renderGraph() {
if (plot1) {
plot1.destroy();
}
plot1 = $.jqplot('chart1', [storedData]);
}
var newData = [9, 1, 4, 6, 8, 2, 5];
function doUpdate() {
if (newData.length) {
var val = newData.shift();
$.post('/echo/html/', {
html: val
}, function(response) {
var newVal = new Number(response); /* update storedData array*/
storedData.push(newVal);
renderGraph();
log('New Value '+ newVal+' added')
setTimeout(doUpdate, 3000)
})
} else {
log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}
});
</script>
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
</body>
</html>我无法使按钮单击事件工作。我一点击Start Update按钮，它就没有绘制任何东西。正确的行为应该是它应该开始在具有新数据集的图形上呈现。
我试着在这个jsfiddle上实现实时渲染
我在我的超文本标记语言中复制了上述JSFiddle中的相同代码，但它不适用于我。有人能帮我吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-17 13:47:37
在这里-您必须在脚本标记中更新到您的jqplot位置。此外，据我所知，我不得不将doUpdate改为doUpdate2，因为没有jfiddle，$.post将无法工作。
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript">
$(function(){
/* store empty array or array of original data to plot on page load */
var storedData = [70, 10];
/* initialize plot*/
var plot1;
renderGraph();
$('button').click( function(){
doUpdate2();
$(this).hide();
});
function renderGraph() {
if (plot1) {
plot1.destroy();
}
plot1 = $.jqplot('chart1', [storedData]);
}
var newData = [9, 1, 4, 6, 8, 2, 5];
var cp = 0;
function doUpdate2() {
var newVal = new Number(newData[cp]); /* update storedData array*/
storedData.push(newVal);
renderGraph();
log('New Value '+ newVal+' added')
if (cp < newData.length-1) setTimeout(doUpdate2, 3000)
cp++;
}
function doUpdate() {
if (newData.length) {
var val = newData.shift();
$.post('/echo/html/', {
html: val
}, function(response) {
var newVal = new Number(response); /* update storedData array*/
storedData.push(newVal);
renderGraph();
log('New Value '+ newVal+' added')
setTimeout(doUpdate, 3000)
})
} else {
log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}
});
</script>
</head>
<body>
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>Start Updates</button>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16051968
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号