chartjs;無法讀取屬性'0'的未定義

我想要做的是使用chartjs來創建一個條形圖。數據通過$ .ajax檢索。從$ .ajax檢索的JSON數據將稍後添加到數據集中。但是，當我即將創建chartjs時。有一個從chart.js之庫是錯誤的：chartjs;無法讀取屬性'0'的未定義

Uncaught TypeError: Cannot read property '0' of undefined

我已經檢查了所有的數據後裝完AJAX。還有與JSON（我已經檢查控制檯）沒有問題。此外，當我檢查myBarChart類型報告爲未定義。即使我完成了回顧JSON數據後，我已經爲自己分配了一個新的chartjs。

下面是JavaScript代碼：

var driverCode, driverPointsGained = ""; 
var exLabel = new Array(); 
var exPoints = new Array(); 
var chartData; 
var myBarChart; 
var ctx = document.getElementById("driverStandingChart").getContext("2d"); 
//var ctx = $("#driverStandingChart").get(0).getContext("2d"); 

Chart.defaults.global.responsive = true; 

function addChartData(codename, pointsgained) { 
    chartData = { 
     label: codename, 
     datasets: [ 
      { 
       fillColor: "rgba(151,187,205,0.5)", 
       strokeColor: "rgba(151,187,205,0.8)", 
       highlightFill: "rgba(151,187,205,0.75)", 
       highlightStroke: "rgba(151,187,205,1)", 
       data: pointsgained 
      } 
     ] 
    }; 
    return chartData; 
} 

$("#testAjaxLoading").click(function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: "http://ergast.com/api/f1/current/driverStandings.json", 
     dataType: "json", 
     success: function (data) { 
      console.info(data); 

      for (var i = 0; i <= data.MRData.total-1; i++) { 

       driverCode = data.MRData.StandingsTable.StandingsLists[0].DriverStandings[i].Driver.code; 
       driverPointsGained = data.MRData.StandingsTable.StandingsLists[0].DriverStandings[i].points; 

       console.info("code: " + driverCode + " points: " + driverPointsGained); 

       //push data to array 
       exLabel.push(driverCode); 
       exPoints.push(driverPointsGained); 
      } 

      addChartData(exLabel,exPoints); 

      console.log(chartData); 

      myBarChart = new Chart(ctx).Bar(chartData); 

      alert("finished retrieve data"); 
     }, 
     error: function (err) { 
      console.error(err); 
     } 
    }); 
});

全部代碼HTML：https://gist.github.com/sancowinx/31b6289b7f28908db0c1

對於JSON數據，我使用Ergast API的API來獲取一個JSON結果。

編輯：將堆棧跟蹤：

enter image description here $ .ajax.success實際上myBarChart = new Chart(ctx).Bar(chartData);

是有什麼建議？提前致謝。

來源

2014-09-29 sancowinx

如果沒有'f1.js'文件依賴性，就無法運行你的示例。：/ – CullenJ 2014-09-29 19:53:44

此外，如果您粘貼錯誤的堆棧跟蹤會更容易：https：//developer.chrome.com/devtools/docs/javascript-debugging#viewing-exception-stack-trace – CullenJ 2014-09-29 19:55:24

@CullenJ已添加堆棧跟蹤。其實f1.js與這個問題並不完全相關。 f1.js用於檢索其他結果。但是，您可以查找f1.js源代碼[here]（https://gist.github.com/sancowinx/62bd7eea1f28b4dcbbb5） – sancowinx 2014-09-29 20:03:55

您的堆棧跟蹤告訴我，ctx或chartData未定義。我的猜測是，如果你已經檢查過chartData，它就是ctx。（使用console.log對此進行驗證。）如果出現這種情況，或許這就是答案：canvas.getContext("2d") is undefined

如果情況並非如此，那麼ChartJS在您的JSON中尋找的元素是未定義的。如果出現這種情況，您將不得不查看文檔以查看缺失的元素。

來源

2014-09-29 20:32:06 CullenJ

chartjs;無法讀取屬性'0'的未定義

回答

相關問題