Question

我正在使用Flask作为框架开发应用程序。我使用 Google Visualization API绘制图表。图表显示在轮播滑块上。一个滑块显示四个图形。第一个显示正确。当我试图在下一个滑块上绘制图形时，它表现得非常奇怪并且抛出错误。请在下面找到图片：

在首页中更正输出：

第二页

错误：

过去两天我一直在努力解决这个问题，但未能成功。我无法找出问题所在。任何人都能纠正我的错误吗？

代码：

<!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>

Google Visualization投掷“null of null”错误

0 个答案: