2012-09-25 69 views
0

我的JSON文件看起來像jqplot - 未捕獲的異常 - 無數據

{"items":[ 
{"date":"2012-03-12","scoreMin":"9","scoreMax":"25","scoreAverage":"20.39","scoreSTD":"3.86","scoreCount":"133","count20":"73","count25":"46"}, 
{"date":"2012-03-13","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"}, 
{"date":"2012-03-14","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"}, 
{"date":"2012-03-15","scoreMin":"9","scoreMax":"25","scoreAverage":"20.9","scoreSTD":"4.25","scoreCount":"99","count20":"56","count25":"46"}, 
{"date":"2012-09-15","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"}, 
{"date":"2012-09-16","scoreMin":"5","scoreMax":"24","scoreAverage":"18.55","scoreSTD":"5.65","scoreCount":"100","count20":"45","count25":"0"}, 
{"date":"2012-09-17","scoreMin":"5","scoreMax":"24","scoreAverage":"18.59","scoreSTD":"5.67","scoreCount":"99","count20":"45","count25":"0"}, 
{"date":"2012-09-18","scoreMin":"5","scoreMax":"24","scoreAverage":"18.64","scoreSTD":"5.67","scoreCount":"100","count20":"46","count25":"0"} 
]} 

和我的劇本是

<!DOCTYPE html> 
<html> 
<head> 
    <title>Date Axes</title> 
    <script language="javascript" type="text/javascript" src="jqplot/jquery.min.js"></script> 
    <script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script> 
    <script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" /> 
</head> 
<body> 
    <h2> 
     Some Statistics</h2> 
    <div id="chartCanvas" style="height: 400px; width: 1000px; align"> 
    </div> 
    <br /> 
    <script type="text/javascript"> 

    $(function(){ 
    $(document).ready(function(){ 
    alert('Document ready'); 
    var objArrayData=[]; 
    var objArray = [];  
    $.getJSON("data.json",function(data){ 

     $.each(data.items, function(i,data){ 
     objArrayData[i] =("['" + data.date + "'," + data.scoreAverage + "]"); 
     }); 

     alert('Fetched ' + objArrayData.length + ' items!'); 
     console.log('object Data ' + objArrayData); 
     objArray = ("[" + objArrayData + "]"); 
     console.log('object Array' + objArray); 

     var plot = $.jqplot('chartCanvas', [objArray], { 
        title:'Rubric Average Scores', 
        gridPadding:{right:35}, 
        axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer, 
        tickOptions:{formatString:'%#m/%y'}, 
        //tickOptions:{formatString:'%b-%y'}, 
        min:'March 30, 2012', 
        tickInterval:'1 month', 
        angle: -30, 
        }}, 
        yaxis:{label:'Average Score', 
        }, 
        series:[{lineWidth:3, markerOptions:{style:'square'}}] 
        }); 

    });  

    }); 
    return false; 
    }); 
    </script> 
</body> 
</html> 

我未捕獲得到exception-無數據錯誤 繪製圖表之前,我打印陣列,並有我需要的所有值。

缺什麼?我在哪裏做錯了? 感謝您的幫助。

回答

0

我不明白你爲什麼要以這裏的方式將數據提供給o​​bjArrayData數組。這些數據並不僅僅因爲它們周圍有方括號而成爲一個數組(它只會在cosole.log中顯得很漂亮,令人滿意和困惑)。

使用array.push()而不是你在這裏做的方式。

並且還要確保在將解析爲數組之前將其編號爲data.scoreAverage。 您可以使用parseFloat()函數來完成。

因此最後你可以像這樣將數據提供給數組。

objArrayData.push([data.date,parseFloat(data.scoreAverage)]); 

下面是修改後的工作代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Date Axes</title> 
    <script language="javascript" type="text/javascript" src="../jquery.min.js"></script> 
    <script language="javascript" type="text/javascript" src="../jquery.jqplot.min.js"></script> 
    <script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" /> 
</head> 
<body> 
    <h2> 
     Some Statistics</h2> 
    <div id="chartCanvas" style="height: 400px; width: 1000px; align"> 
    </div> 
    <br /> 
    <script type="text/javascript"> 

     $(function(){ 
      $(document).ready(function(){ 
       var objArrayData=[]; 
       var objArray = [];  
       $.getJSON("data.json",function(data){ 

        $.each(data.items, function(i,data){ 
         objArrayData.push([data.date,parseFloat(data.scoreAverage)]); 
        }); 

        console.log('object Data ' + objArrayData); 

        var plot = $.jqplot('chartCanvas', [objArrayData], { 
           title:'Rubric Average Scores', 
           gridPadding:{right:35}, 
           axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer, 
           tickOptions:{formatString:'%Y-%m-%d'}, 
           //tickOptions:{formatString:'%b-%y'}, 
           min:'March 30, 2012', 
           tickInterval:'1 month', 
           angle: -30, 
           }}, 
           yaxis:{label:'Average Score', 
           }, 
           series:[{lineWidth:3, markerOptions:{style:'square'}}] 
           }); 

       });  

      }); 
      return false; 
     }); 
    </script> 
</body> 
</html> 

希望這會有所幫助。 PS:確保你多瞭解一些數組。