1

请帮助我如何从我的数据库数据中动态填充这个chartjs饼图，以便与饼图一起显示。我的意思是从我的数据库中获取查询并将我的数据库提供的数据转换为与 chartjs 格式所需的数据兼容。请帮我。

我正在使用 ajax 从我的数据库中获取值：

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

下面的代码的值为 JSON OBJECT WITH THESE QUERY RESULT（响应值）：

[{"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);
4

1 回答 1

0

我认为您坚持为 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-06T09:27:20.647 回答