數據值顯示NAN在運行系統中的折線圖

我正在使用折線圖來生成一個圖表，它的工作正常，但在中存在問題圖;有一個值顯示NAN。我不明白爲什麼會發生這種情況。我的數據正在以json格式發送。數據值顯示NAN在運行系統中的折線圖

這裏是我的阿賈克斯代碼：

$(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} 
]

的問題是在7月字段其中總數爲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輸出

來源

2015-10-14 Akhilesh Singh

什麼參數不* salesChart.addData *期待什麼呢？問題是我認爲這行代碼。 – Robert

我只是簡單地將數據與salesChart附加在文檔中顯示。我在條形圖中使用了同樣的技術，並且它的全部工作精細唯一的問題。 –

你可以在for循環之後發佈* console.log（data）; *的輸出嗎？ – Robert

經過大量的研究工作，終於找到了解決問題的辦法。

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


}

來源

2016-01-05 08:08:33

數據值顯示NAN在運行系統中的折線圖

回答

相關問題