5
私はFlaskを使用して簡単なアプリケーションを作成しています。私はグラフを描画するためにGoogle APIを使用しています。最初のページが正しく表示されます。 "プロパティの長さを読み取れません" - Google
しかし、私は取得しています次のページで
はエラー「ヌルのプロパティ長さを読み取ることができません」。
マイコード以下の通りである：
コード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="refresh" content="100; URL=http://127.0.0.1:5000/">
<title>Test</title>
<!-- Bootstrap Core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/bootstrap-multiselect.css" rel="stylesheet">
<link href="static/css/new.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="static/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<!-- JavaScript -->
<script src="static/js/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-multiselect.js"></script>
<script src="static/js/Chart.js-master/Chart.js"></script>
</head>
<body onload = onLoading()>
<div class="container">
<div class="col-xs-12">
<div class="page-header">
<h3><b>Test</b></h3>
</div>
<div class="carousel slide" id="myCarousel">
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
<!-- Slide1 -->
<div class="carousel-inner" id="imp">
<!-- /Slide1 -->
</div><!-- /Carousel inner -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 3000
})
});
function onLoading() {
//alert("Inside");
$.get("/load",function(calldata,status) {
//console.log(calldata);
//alert(calldata.length);
var num_nodes = calldata.length;
var loop = 0;
for (i=0;i<num_nodes;i++) {
if (i%4==0) {
if (i==0) {
var divoutput = document.getElementById("imp");
var divhtml = '<div class="item active" id="c'+(i/4)+'"></div>';
divoutput.innerHTML = divoutput.innerHTML+divhtml;
alert(i);
console.log(divoutput.innerHTML);
} else {
var divoutput = document.getElementById("imp");
var divhtml = '<div class="item" id="c'+(i/4)+'"></div>';
divoutput.innerHTML = divoutput.innerHTML+divhtml;
loop = i/4;
alert(loop);
console.log(divoutput.innerHTML);
}
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Errors');
data.addColumn('number', 'Statistics');
data.addRows([
['Success', calldata[i].errors.success],
['Authorization Failure', calldata[i].errors.auth_failure],
['Feature Failure', calldata[i].errors.feature_failure],
['FSOL Failure', calldata[i].errors.fsol_failure]
]);
var options = {
title: calldata[i].node_name,
is3D: true,
backgroundColor:'#ECECEA',
};
var output = document.getElementById("c"+loop);
//alert("***"+document.getElementById("c"+loop));
var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>';
//alert(html);
output.innerHTML = output.innerHTML + html;
var tmp = "i";
var ele_id = tmp.concat(i);
//alert(ele_id);
if (calldata[i].errors.success < calldata[i].errors.auth_failure) {
document.getElementById("i"+i).style.backgroundColor = "red";
}
google.setOnLoadCallback(drawChart(ele_id,data,options));
}
});
}
function drawChart(ele_id,data,options)
{
google.load("visualization", "1", {packages:["corechart"]});
//alert(ele_id);
//alert("draw"+document.getElementById(ele_id));
var chart = new google.visualization.PieChart(document.getElementById(ele_id));
chart.draw(data, options);
}
</script>
</body>
</html>
エラーはどこですか？ – vijayP
"load"のためにgetを呼び出すときにcalldataがnullになることがあります。 –
私のコンソールにエラーが表示されず、グラフを表示する代わりにボックスにエラーが表示されています。最初のページは完全に正常に動作しています。 – sklearning