Question

我的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>

我收到未捕获的异常 - 没有数据错误在绘制图表之前，我正在打印数组，并且我需要所有值。

缺少什么？我哪里做错了？谢谢你的帮助。

Answer 1

我不明白你为什么要按照你在这里的方式向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>

这是修改后的工作代码。

{{1}}

希望这有帮助。

PS：确保您了解更多阵列。

jqplot - 未捕获的异常 - 没有数据

1 个答案: