Chart.js甜甜圈圖表不正常工作

我正在嘗試使用chart.js甜甜圈圖表。我的JSON數據是從數據庫中獲取的。但在價值圖表的填充時間將不會顯示。如果我粘貼示例代碼靜態，那麼它顯示正確的數據。Chart.js甜甜圈圖表不正常工作

function playerPrel2Res(qID){ 
    var tmp="#playerVoteId"+qID; 
    var lab=$(tmp).text(); 
    $.ajax({ 
     type : "POST", 
     url : contextPath + '/common/playerPredCounter.action', //contextPath for dynamic 
     dataType : 'json', 
     data : {predictionID:qID}, 
     success : function(data) { 
      var id=new Array(); 
      var name=new Array(); 

      for (var i = 0; i < data.properties.length; i++) { 
       id[i]= data.properties[i].id; 
       name[i]= data.properties[i].name; 
      } 
      alert("hi..."); 
      var doughnutData = [ 
       { 
        value: id[0], 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: name[0] 
       }, 
       { 
        value: id[1], 
        color: "#46BFBD", 
        highlight: "#5AD3D1", 
        label: name[1] 
       }, 
       { 
        value: id[2], 
        color: "#FDB45C", 
        highlight: "#FFC870", 
        label: name[2] 
       }, 
      ]; 

     window.onload = function(){ 
      var ctx = document.getElementById('playerChartArea').getContext("2d"); 
      alert(ctx +"path"); 
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     };    

     } 
    }); 
}

這將不顯示任何放出來，但我寫這樣的靜態然後顯示圖表

var doughnutData = [ 
       { 
        value: id[0].val(), 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: name[0].val() 
       }, 
       { 
        value: 50, 
        color: "#46BFBD", 
        highlight: "#5AD3D1", 
        label: "Green" 
       }, 
       { 
        value: 100, 
        color: "#FDB45C", 
        highlight: "#FFC870", 
        label: "Yellow" 
       }, 
       { 
        value: 40, 
        color: "#949FB1", 
        highlight: "#A8B3C5", 
        label: "Grey" 
       }, 
       { 
        value: 120, 
        color: "#4D5360", 
        highlight: "#616774", 
        label: "Dark Grey" 
       } 
      ]; 

     window.onload = function(){ 
      var ctx = document.getElementById('playerChartArea').getContext("2d"); 
      alert(ctx +"path"); 
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     };

一件事是，我的警報不顯示ctx 請幫助我。

來源

2014-09-04 CHiRAG

我有同樣的問題。如果該值來自數據庫，則不顯示圓環圖，我print_r數組，值正確。但是，如果我設置靜態值，它顯示。任何人請...... – Wakanina 2014-09-05 14:11:46

嘿..我成功地顯示甜甜圈通過使用'intval（$ value）'的值。我正在使用PHP生成數據數組。也許你可以通過獲取值的整數值來在Javascript中做同樣的事情。我現在不用Javascript來做。 – Wakanina 2014-09-05 14:23:33

我以這只是做這個工作，我貼我的代碼

var doughnutData=""; 
    $.ajax({ 
     type : "POST", 
     url : contextPath + '/common/action', //contextPath for dynamic 
     dataType : 'json', 
     data : {predictionID:oID}, 
     success : function(data) { 
      var id=new Array(); 
      var name=new Array(); 

      for (var i = 0; i < data.properties.length; i++) { 
       id[i]= data.properties[i].id; 
       name[i]= data.properties[i].name; 
      } 

      doughnutData = [ 
       { 
        value: id[0], 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: name[0] 
       }, 
       { 
        value: id[1], 
        color: "#46BFBD", 
        highlight: "#5AD3D1", 
        label: name[1] 
       }, 
       { 
        value: id[2], 
        color: "#FDB45C", 
        highlight: "#FFC870", 
        label: name[2] 
       }, 
       { 
        value: id[3], 
        color: "#949FB1", 
        highlight: "#A8B3C5", 
        label: name[3] 
       }, 
       { 
        value: id[4], 
        color: "#4D5360", 
        highlight: "#616774", 
        label: name[4] 
       } 
      ]; 
      var ctx = document.getElementById("canvas").getContext("2d"); 
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     } 
    });

所以才申報doughnutData變量全球和刪除windows.load功能，只是保持內部代碼。就是這樣

來源

2014-09-08 04:22:02 CHiRAG

Chart.js甜甜圈圖表不正常工作

回答

相關問題