如何動態地填充我的chartjs餅圖

請幫助我如何從我的數據庫數據動態填充此chartjs餅圖以便與餅圖一起顯示。我的意思是從我的數據庫獲取查詢，並將我的數據庫提供的數據轉換爲與來自chartjs格式的數據需求兼容。請幫幫我。如何動態地填充我的chartjs餅圖

我使用Ajax來得到我的分貝值：

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

下面的代碼有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"}]

以下是來自餅圖樣本的數據：

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

來源

2017-04-09 Jc John

任何答案plss我需要它 –

我覺得你被困在創建圖表形式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 
    ); 
}

再次轉換陣列成JSON得到你想要的PieData：

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" 
    } 
]

來源

2017-08-06 09:27:20

如何動態地填充我的chartjs餅圖

回答

相關問題