Question

我有一个关于从chartjs AREA图表填充动态数据的问题，现在我设法从我的数据库查询我的所有诊所这些查询结果：

SELECT
tbl_clinics.clinic_name,
COALESCE(COUNT(tbl_check_up.check_up_id),0) AS total_checked_up
FROM
tbl_clinics
LEFT OUTER JOIN tbl_queue ON tbl_clinics.clinic_id = tbl_queue.clinic_id
LEFT OUTER JOIN tbl_check_up ON tbl_queue.queue_id = tbl_check_up.queue_id
WHERE tbl_clinics.user_id = 102
GROUP BY tbl_clinics.clinic_name

现在，这是我的ajax函数，我得到该查询，它的响应是一个json数据对象：

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

现在我的问题是我如何转换或把它像chartjs areachart数据看起来像。 Area chartjs格式如下所示：

// Get context with jQuery - using jQuery's .get() method.
    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);

将数据从db转换为chartjs areachart动态数据

0 个答案: