Javascript图形谷歌代码动态生成
Javascript Graph Google Code Dynamically Generated
我想知道是否有人能帮助处理这个函数,它来自谷歌代码折线图,我想做的是从下面的distanceField变量中添加值,并希望每次出现新值时都更新图表,不确定我是否采取了最好的方法来处理这个问题,但对这个问题的任何见解都会有所帮助提前谢谢。
function drawVisualization2() {
var d2 = document.getElementById('distanceField').value;
var i;
var arr = new Array();
setInterval(function() {var f1 =document.getElementById('resultField').value;},5000);
for (i = 0; i < 10; i++) {
var f1 = document.getElementById('resultField').value;
var d1 = parseInt(f1, 10);
setTimeout(function() {
//setInterval(function() {app.sendConnection()}, 10000);
//var f1 = document.getElementById('resultField').value;
arr[i] = d1;
}, 6000);
}
var data = google.visualization.arrayToDataTable([
[ 'x', 'title' ], [ '1', arr[0] ], [ '2', arr[1] ],
[ '3', arr[2] ], [ '4', arr[3] ], [ '5', arr[4] ],
[ '6', arr[5] ], [ '7', arr[6] ], [ '8', arr[7] ],
[ '9', arr[8] ], [ '10', arr[9] ],
//['N', 1, 0.5, 1]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document
.getElementById('visualization2')).draw(data, {
curveType : "function",
width : 500,
height : 350,
vAxis : {
maxValue : d2 / 2
}
});
}
您发布的代码块有很多问题,包括范围界定和同步问题-我没有试图拼凑它来使其工作,而是重写了它,并评论了我为什么这样做:
/**
* A JS class that you can instansiate with the "new" construct
* on page/api load - this keeps everything self-contained and
* for the most part, out of the global scope.
*/
function ChartObject(){
// internal function - neater way to grab elements
function $(x){ return document.getElementById(x); }
// some default data
this.data = [['x', 'Metric Title'], ['start',0]];
// read values from our DOM elements and add to our data array
this.update = function(){
var dis = $('distanceField').value.trim(),
res = parseInt($('resultField').value, 10);
if(!isNaN(res) && !!dis){
this.data.push([dis, res]);
this.draw();
} else {
alert('invalid entry');
}
};
// redraw our graph based on our current data array
this.draw = function(){
new google.visualization.LineChart($('visualization')).draw(
google.visualization.arrayToDataTable(this.data),
{
curveType : "function",
width : 450,
height : 300
}
);
}
// the following is executed once when the ChartObject is first called
// draw the object with initial data
this.draw();
// add listener to button that user can click to "update" graph
// this could be adapted to work with "onkeyup" rather than trying
// to hack with "setTimeout"
$('addRecord').onclick = function(){
myChartObject.update();
}
};
jsFiddle:工作示例
相关文章:
- 如何动态插入jquery代码
- 您有更好的动态方式来缩短复杂的代码jquery吗
- 动态代码中存在系统应用程序地址错误
- 在iframe代码中动态插入子id
- 来自mysql的动态值用于html代码点火器视图中的图形
- 为什么动态加载的事件在我的代码中不能正常工作
- 此代码中动态生成选择框有什么问题
- 在 JavaScript 或 jQuery 中将代码动态附加到函数的末尾
- 使用 Javascript 动态删除行.我的代码有什么问题
- MVC 4:使用 JQUERY 和 PartViewResult 动态创建 HTML 文本框.如果代码是动态添加的,如何
- iframe动态代码的奇怪行为
- 用于将 Class 添加到链接中指定的元素的动态代码
- 如何在 html 中压缩动态代码
- 如何捕获仅临时添加到浏览器的动态代码
- 如何修复由于在java脚本中使用eval()而在强化扫描中的动态代码评估问题
- 在Javascript中使用什么来代替eval进行动态代码生成/加载
- 为什么在使用Function构造函数进行动态代码求值时没有形成闭包
- 如何在webpack配置中运行动态代码
- 一些动态代码被附加到我的代码之上,如何解决它
- 带有 HTML 的图标动态代码