私のchartjs piechartを動的に埋め込む方法

Question

私はこのchartjs piechartを私のデータベースのデータから動的に取り込んで、piechartで表示する方法を教えてください。私は自分のデータベースからクエリを取得し、私のデータベースによって与えられたデータを、chartjs形式のデータのニーズに適合するように変換することを意味します。私を助けてください。

私は私のDBから値を取得するために、AJAXを使用しています：

function getpieclinic() { 
    $.ajax({ 
     url: siteurl+"patients_report/piedataclinic", 
     type: "GET", 
     dataType: "JSON", 
     success:function(response) { 
      alert(response); 
     } 
    }); 
} 

以下のコードがあるTHESE QUERY結果とJSONオブジェクトの値（レスポンス値）：

[{"clinic_name":"Clinic 1","total_checked_up":"4"},{"clinic_name":"Clinic 2","total_checked_up":"0"},{"clinic_name":"Clinic 3","total_checked_up":"0"},{"clinic_name":"Clinic 4","total_checked_up":"0"}] 

これは、次のpiechartサンプルのデータです：

var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); 
    var pieChart = new Chart(pieChartCanvas); 
    var PieData = [ 
     { 
     value: 700, 
     color: "#f56954", 
     highlight: "#f56954", 
     label: "Chrome" 
     }, 
     { 
     value: 500, 
     color: "#00a65a", 
     highlight: "#00a65a", 
     label: "IE" 
     }, 
     { 
     value: 400, 
     color: "#f39c12", 
     highlight: "#f39c12", 
     label: "FireFox" 
     }, 
     { 
     value: 600, 
     color: "#00c0ef", 
     highlight: "#00c0ef", 
     label: "Safari" 
     }, 
     { 
     value: 300, 
     color: "#3c8dbc", 
     highlight: "#3c8dbc", 
     label: "Opera" 
     }, 
     { 
     value: 100, 
     color: "#d2d6de", 
     highlight: "#d2d6de", 
     label: "Navigator" 
     } 
    ]; 
    var pieOptions = { 
     //Boolean - Whether we should show a stroke on each segment 
     segmentShowStroke: true, 
     //String - The colour of each segment stroke 
     segmentStrokeColor: "#fff", 
     //Number - The width of each segment stroke 
     segmentStrokeWidth: 2, 
     //Number - The percentage of the chart that we cut out of the middle 
     percentageInnerCutout: 50, // This is 0 for Pie charts 
     //Number - Amount of animation steps 
     animationSteps: 100, 
     //String - Animation easing effect 
     animationEasing: "easeOutBounce", 
     //Boolean - Whether we animate the rotation of the Doughnut 
     animateRotate: true, 
     //Boolean - Whether we animate scaling the Doughnut from the centre 
     animateScale: false, 
     //Boolean - whether to make the chart responsive to window resizing 
     responsive: true, 
     // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 
     maintainAspectRatio: true, 
     //String - A legend template 
     legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 
    }; 
    //Create pie or douhnut chart 
    // You can switch between pie and douhnut using the method below. 
    pieChart.Doughnut(PieData, pieOptions); 

Answer 1

私はチャートフォームJSON用のPiedataを作成することに固執していると思います。ここでは解決策は以下のとおりです。

あなたのJSON文字列は：

$json = '[{"clinic_name":"Clinic 1","total_checked_up":"4"},{"clinic_name":"Clinic 2","total_checked_up":"0"},{"clinic_name":"Clinic 3","total_checked_up":"0"},{"clinic_name":"Clinic 4","total_checked_up":"0"}]'; 

最初の配列に変換します

$array = json_decode($json); 

は空の変数を宣言します。

$string_array = ''; 

ループ配列を投げました：

foreach($array as $single_array){ 

    $string_array[] = array(
    'value'=>$single_array->total_checked_up, 
    'color'=>'#f56954', 
    'highlight'=>'#f56954', 
    'label'=>$single_array->clinic_name 
    ); 
} 

は、ご希望のPieDataを得るために、再びJSONに配列を変換します

var PieData = json_encode($string_array); 

これはあなたのPieDataデータがどのように見えるかです。

[ 
    { 
     "value": "4", 
     "color": "#f56954", 
     "highlight": "#f56954", 
     "label": "Clinic 1" 
    }, 
    { 
     "value": "0", 
     "color": "#f56954", 
     "highlight": "#f56954", 
     "label": "Clinic 2" 
    }, 
    { 
     "value": "0", 
     "color": "#f56954", 
     "highlight": "#f56954", 
     "label": "Clinic 3" 
    }, 
    { 
     "value": "0", 
     "color": "#f56954", 
     "highlight": "#f56954", 
     "label": "Clinic 4" 
    } 
]