使用chart.js將JSON數據顯示到餅圖中

我第一次使用chart.js並且遇到了一個我似乎無法解決它的小錯誤。下面是我的代碼，但是，它只是顯示標籤，而不是渲染餅圖本身。使用chart.js將JSON數據顯示到餅圖中

從這裏chart.js之文檔

上午以下樣本http://www.chartjs.org/docs/#doughnut-pie-chart-example-usage

您的幫助將不勝感激。

<canvas id="myChart" width="200" height="200"></canvas> 

$(document).ready(function() { 
/* 
     -> #47A508 = green (wins) 
     -> #ff6a00 = orange (losses) 
     -> #ffd800 = yellow (draws) 
    */ 
    var DataArray = []; 
    var ctx = document.getElementById("myChart"); 

    $.ajax({ 
     url: 'http://api.football-data.org/v1/competitions/426/leagueTable', 
     dataType: 'json', 
     type: 'GET', 
    }).done(function (result) { 
     $.each(result.standing, function() { 
      var name = "Manchester United FC"; 
      if (this.teamName == name) { 
       DataArray.push([this.wins, this.losses, this.draws]); 
      } 
     }); 
     var myChart = new Chart(ctx, { 
      type: 'pie', 
      data: { 
       label: 'Manchester United Current Form', 
       labels: [ 
         "Wins", 
         "Losses", 
         "Draws" 
       ], 
       datasets: [ 
        { 
         data: DataArray, 
         backgroundColor: [ 
          "#47A508", 
          "#ff6a00", 
          "#ffd800" 
         ], 
         hoverBackgroundColor: [ 
          "#FF6384", 
          "#36A2EB", 
          "#FFCE56" 
         ] 
        }] 
      }, 
      options: { responsive: true } 
     }); 
    }); 
}

來源

2016-10-18 bazi.the.developer

我得到這個解決了，好遺憾的是，沒有任何魔法都吹噓。最初的代碼沒有錯，但是，這是DOM渲染性能的問題。謝謝@alwaysVBNET和@Aniko Litvanyi的投入。

這link幫了我，希望它有人在那裏。

來源

2016-10-19 03:10:51

也許是因爲jQuery的每個，它填補DataArray中異步和數組還沒有準備好，當你想使用它作爲圖表數據。的$。每更改爲一個簡單的JS的for循環

for(var i = 0; i < result.standing; i++){ 
    var name = "Manchester United FC"; 
    var team = result.standing[i]; 
     if (team.teamName == name) { 
      DataArray.push(team.wins, team.losses, team.draws); 
     } 
}

來源

2016-10-18 18:11:19

我只是試過這個，但圖表仍然沒有渲染。如果可能的話，你能否爲此提供一個可用的jsfiddle。謝謝。 –

開發工具欄控制檯上是否有任何錯誤消息？ –

我看到的一些錯誤是來自一些試圖添加到我的頁面的rss提要的一部分，但與圖表無關。我已經清理了這些，但它仍然沒有渲染。畫布佔據了我分配的空間（寬度和高度），但它並未顯示餅圖本身。 –

嘗試callbacks你阿賈克斯還是做以下（這是一個骯髒的解決方案）：

$.ajax({ 
     url: 'http://api.football-data.org/v1/competitions/426/leagueTable', 
     dataType: 'json', 
     cache: false, //add this 
     async: false, //add this 
     type: 'GET',

而且你的Ajax的結果可以使用下面的代碼而不是使用數組來返回。

jQuery.parseJSON(result);

來源

2016-10-18 23:34:17 alwaysVBNET

問題在於你的DataArray。它的實現方式是隻有一個條目的數組。這是另一個陣列本身。

[[<wins>, <losses>, <draws>]]

代替

[<wins>, <losses>, <draws>]

那是因爲你初始化數組，然後推入一個數組對象。

要解決這個問題嘗試使用以下功能：

(...) 
$.each(result.standing, function() { 
    var name = "Manchester United FC"; 
    if (this.teamName == name) { 
     DataArray = ([this.wins, this.losses, this.draws]); 
     console.log("This team name"); 
    } 
}); 
(...)

來源

2016-10-19 02:27:38 fmello

使用chart.js將JSON數據顯示到餅圖中

回答

相關問題