运行时折线图中显示 NAN 的数据值答案

【问题标题】：Data Value showing NAN In Line Chart In Runtime运行时折线图中显示 NAN 的数据值
【发布时间】：2016-01-12 01:33:33
【问题描述】：

我正在使用折线图生成图表，它工作正常，但 Graph 存在问题；有一个值显示 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}
 ]

问题出在 July 字段中，总数为 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 输出

【问题讨论】：

salesChart.addData 期望什么参数？我认为问题在于这行代码。
我只是简单地将数据与 salesChart 附加为文档中的显示。我在 Barchart 中使用了相同的技术，它也完全可以正常工作，唯一的问题是出现。
你能在for循环之后发布console.log(data);的输出吗？
好的，我发布控制台的日志

标签： javascript ajax nan linechart

【解决方案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);
    }


}

【讨论】：