Question

我使用折线图生成图表，其工作正常，但图形存在问题;有一个值显示 NAN 。我无法理解为什么会这样。我的数据完全采用 json 格式。

这是我的 Ajax 代码：

$(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);
        }
    });
});

输出我的数据包含：

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

问题出在七月字段，其中总计为34 但在图表中显示 NAN 。

图形生成功能：

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>

完成输出：

请帮我弄清楚问题及其发生的原因如果所有数据都是正确的。

控制台输出

Dom输出

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);
    }


}

数据值在运行系统中显示NAN In Line Chart

1 个答案: