chart.js，不能使用AJAX的图形

我已经开始使用chart.js，并且我正在尝试将它与Ajax一起使用。我在chrome中运行，并使用调试器，但它不给我任何一种错误。问题是，我不能看到我正在尝试构建的饼图。chart.js，不能使用AJAX的图形

的代码是在同一个地方，因为它是一个测试代码：

<!doctype html> 
<html> 
<head> 
<title>Pie Chart with Custom Tooltips</title> 
<script src="Chart.bundle.js"></script> 
<script src="jquery.js"></script> 
<style> 
#canvas-holder 
{ 
    width: 100%; 
    margin-top: 50px; 
    text-align: center; 
} 
#chartjs-tooltip 
{ 
    opacity: 1; 
    position: absolute; 
    background: rgba(0, 0, 0, .7); 
    color: white; 
    border-radius: 3px; 
    -webkit-transition: all .1s ease; 
    transition: all .1s ease; 
    pointer-events: none; 
    -webkit-transform: translate(-50%, 0); 
    transform: translate(-50%, 0); 
} 

.chartjs-tooltip-key 
{ 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
} 
</style> 
</head> 
<body> 
<div id="canvas-holder" style="width: 300px;"> 
    <canvas id="chart-area2" width="300" height="300" /> 
</div> 
<script> 

    $(document).ready(function() { 

$.ajax({ 
    url: "registo.php", 
    method: "GET", 
    success: function(data) { 
     alert(data); 

     var dados=[]; 
     var score = []; 

     for(var i in data) { 

      score.push(data[i].nome_operadora); 
      dados.push(data[i].conta); 
     } 



    var config = { 
    type: 'pie', 
    data: { 
     datasets: [{ 
      data: dados, 
      backgroundColor: [ 
       "#F7464A", 
       "#46BFBD", 
       "#FDB45C", 
       "#949FB1", 
       "#4D5360", 
      ], 
     }], 
     labels:score 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      enabled: true, 
     } 
    } 
}; 





var ctx2 = document.getElementById("chart-area2").getContext("2d"); 
new Chart(ctx2, config); 





    }, 
    error: function(data) { 
     console.log(data); 
    } 
}); 





}); 




</script>

的registo.php如下：

<?php 
include "../Connections/conexao.php"; 
$query1 = "SELECT `op`.`nome`, COUNT(*) AS conta FROM `op` INNER JOIN `sim` ON `op`.`idcod`=`sim`.`cod_operadora` GROUP BY `op`.`idcod` 
"; 

$result1 = mysqli_query($conexao,$query1); 

$data = array(); 
foreach ($result1 as $row1) { 
$data[] = $row1; 
} 

print json_encode($data); 

?>

感谢提前

编辑：我已经解决了我的问题，它不涉及到AJAX或chart.js，但与JSON对象，我忘了解析它。

来源

2016-08-23 No name

我忘了解析JSON对象。现在解决了

success: function(data) { 
     obj = JSON.parse(data); 
alert(obj); 
     var dados=[]; 
     var score = []; 

     for(var i in obj) { 

      score.push(obj[i].nome_operadora); 
      dados.push(obj[i].conta); 
     } 
alert(score);

来源

2016-08-23 13:30:08

chart.js，不能使用AJAX的图形

回答

相关问题