0

私のjsonファイルは次のようになります

{"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>

キャッチされない例外が発生しています-データエラーはありません チャートをプロットする前に、配列を印刷していますが、必要なすべての値があります。

何が欠けている？私はどこで間違っていますか？ご協力いただきありがとうございます。

4

1 に答える 1

0

ここで行っている方法で objArrayData 配列にデータを供給している理由がわかりません。角かっこで囲まれているからといって、データが配列になるわけではありません ( 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: 配列についてもう少し学んでください。

于 2012-09-26T13:34:52.403 に答える