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甜甜圈图表不正常工作

回答

相关问题