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); 

?>

감사에서이 테스트 코드로

코드는 모두 한 자리에 예고편

EDIT : 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를 사용하여 그래프를 만들 수 없음

답변

관련 문제