javascript - 运行时在线图中显示 NAN 的数据值

Question

我正在使用折线图生成图表，它工作正常但图表 中存在问题；有一个值显示 NAN。我不明白为什么会这样。我的数据完全是 json 格式。

Here is my Ajax code:

$(function () {
    var url = '/1002/workEfficencyGraph.php';
    $.ajax({
        url: url,
        type: 'GET',
        datatype: "html",
        success: function (data) {
            data=eval(data);
            lineChart(data); // call graph generating function
        },
        error: function (e) {
            console.log(e.message);
        }
    });
});

Output my data contains:

 [
     {"month":"June","total":50},
     {"month":"July","total":34},
     {"month":"August","total":37}
 ]

问题出在 July 字段中，总数为 34 但它在图表中显示 NAN。

Graph Generating Function:

function lineChart(data){
    var salesChartCanvas = $("#lineChart").get(0).getContext("2d");
    var salesChartData = {
        labels: [],
        datasets: [
            {
                label: "My Second dataset",
                fillColor: "rgba(210, 214, 222, 1)",
                strokeColor: "rgba(210, 214, 222, 1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: []
            }

        ]
    };


    var salesChartOptions = {
        scaleShowGridLines : true,
        scaleGridLineColor : "rgba(0,0,0,.05)",
        scaleGridLineWidth : 1,
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: true,
        bezierCurve : true,
        bezierCurveTension : 0.4,
        pointDot : true,
        pointDotRadius : 4,
        pointDotStrokeWidth : 1,
        pointHitDetectionRadius : 20,
        datasetStroke : true,
        datasetStrokeWidth : 2,
        datasetFill : true,
        legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

    };
    //salesChart.Bar(salesChartData, salesChartOptions);
    var salesChart = new Chart(salesChartCanvas).Line(salesChartData,salesChartOptions);
    for(var i=0; i<data.length; i++){
        console.log([data[i].total], data[i].month);
        salesChart.addData([data[i].total], data[i].month);
    }
}

HTML

 <div class="box-body">
   <div class="chart">
       <canvas id="lineChart" height="250"></canvas>
   </div>
 </div>

Complete Output:

如果所有数据都是正确的，请帮助我找出问题及其发生的原因。

Console Output

Dom output

Answer 1

经过大量研究，我终于在这里找到了我的问题的解决方案，我可以发布解决方案。

Ajax 代码

$(function () {

        $.ajax({
            url:"/1002/workEfficencyGraph.php",
            type: "GET",
            dataType: "json",
            success: function (data) {
                lineChart(data);
            },
            error: function (e) {
                console.log(e.message);
            }
        });
    });

图生成函数

function lineChart(data){

    var lineChartData = {
        labels : [],
        datasets : [

            {
                label: "My Second dataset",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : []
            }
        ]

    }
       var ctx = document.getElementById("lineChart").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
    for(var i=0; i<data.length; i++) {
        myLine.addData([data[i].total],data[i].month);
    }


}