在AJAX

Question

我可以通过Chart.js成功创建图形。问题是我想根据特定客户的ID生成图形。例如，如果我要拜访客户http://localhost/test/view_customer?customer_id=21&operation=edit。我想使用bdi与客户ID 21的日期来生成图表。

我尝试了许多不同的解决方案，但是没有成功。我想知道是否有通过AJAX执行SQL请求并使用该数据生成图形的方法。

这是我的SQL代码，该代码从URL中获取ID，并生成一个可由chart.js读取以创建折线图的字符串：

<?php
//Gets customer ID from URL 
$cid = htmlentities ($_GET['customer_id']);
//query to get data from the table
$sql = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = ? ORDER BY created_at");

$stmt = mysqli_stmt_init($conn);
mysqli_stmt_prepare($stmt, $sql);
mysqli_stmt_bind_param($stmt, "i", $cid);
mysqli_stmt_execute($stmt);
$data = array();
mysqli_stmt_bind_result($stmt, $bdi, $date);
while(mysqli_stmt_fetch($stmt)) {
  $data[] = array('bdi' => $bdi, 'date' => $date);
}
//free memory associated with result
$result->close();

//now print the data
print json_encode($data); ?>

这是我用来生成折线图的代码：

$(document).ready(function(){
  $.ajax({
    url: "http://localhost/test/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var bdi = [];
      var date = [];

      for(var i in data) {
        date.push( data[i].date);
        bdi.push(data[i].bdi);
      }

      var chartdata = {
        labels: date,
        datasets : [
          {
            label: 'BDI',
            backgroundColor: 'rgba(239, 243, 255, 0.75)',
            borderColor: 'rgba(84, 132, 255, 0.75)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',

            data: bdi
          }
        ]
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata,
        options: {
          responsive: true,
          legend: {
            position: 'bottom',

          },
          scales: {
            yAxes: [{
              ticks: {
                fontColor: "rgba(0,0,0,0.5)",
                fontStyle: "bold",
                beginAtZero: true,
                maxTicksLimit: 5,
                padding: 20
              },
              gridLines: {
                drawTicks: false,
                drawBorder: false,

              }
            }],
            xAxes: [{
              gridLines: {
                zeroLineColor: "transparent",
                display: false
              },
              ticks: {
                padding: 20,
                fontColor: "rgba(0,0,0,0.5)",
                fontStyle: "bold"
              }
            }]
          },

          tooltips: {
            backgroundColor: 'rgba(255,255,255)',
            titleFontColor: 'rgb(184,189,201)',
            bodyFontColor: 'black',
            displayColors: false,
            borderColor: 'rgb(214,217,225)',
            borderWidth: 1,
            caretSize: 5,
            cornerRadius: 2,
            xPadding: 10,
            yPadding: 10
          }
        }
      });
    },
    error: function(data) {
      console.log(data);
    }
  });
});

当前，我正在使用包含数据字符串的URL http://localhost/test/data.php：

[{"bdi":"4","date":"2018-07-11"},{"bdi":"1","date":"2018-07-21"},{"bdi":"5","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"34","date":"2018-07-21"},{"bdi":"3","date":"2018-07-22"},{"bdi":"2","date":"2018-07-23"},{"bdi":"12","date":"2018-07-23"},{"bdi":"3","date":"2018-07-24"},{"bdi":"2","date":"2018-07-25"},{"bdi":"12","date":"2018-07-30"},{"bdi":"3","date":"2018-07-30"},{"bdi":"4","date":"2018-07-30"},{"bdi":"11","date":"2018-07-30"}]

代替使用URL链接数据。我希望AJAX运行我的SQL代码并生成图形（其中treatment_fk是变量）。

问题：

1。是否可以在AJAX中执行SQL命令来生成图形，其中ID是从URL收集的变量？（我该怎么做？）

2。有没有更好的办法？我该怎么办？

Answer 1

苹果为ajax请求添加了一个参数

$.ajax({
    url: "data.php",
    data: { 
        "ChartType": 1/*Or change to drop down selection id*/,
        "customer_id":1
    },
    type: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function(xhr) {

    }
});

您可以在上方看到ChartType，动态传递您要分隔sql查询的值/

现在在服务器端：

$cid = htmlentities ($_GET['customer_id']);
$cType = htmlentities ($_GET['ChartType']);

if($cType==1)
    $sql = sprintf("SELECT treatment_log.bdi, treatment_log.date FROM treatment_log WHERE treatment_fk = ? ORDER BY created_at");
else if($cType==2)
    $sql = sprintf("SELECT __ other column name __ WHERE cid=$cid");
else 
    $sql = sprintf("SELECT __ other column name __ WHERE cid=$cid");

我知道这不是完整的代码，但是它将使您知道如何执行。