Php ChartJS和Ajax调用

我想使用ChartJS和PHP（Silex框架）制作图表

这是我的ajax电话

$.ajax({ url: 'stats',
   data: {method: 'dossierRepartitionType'},
   type: 'post',
   datatype: 'json',
   success: function(output) {
               dataDossierRepartitionType=output;
             },
   error: function () {
                 alert("Oops there is an error.");
  }});

这是我设法调用的PHP函数

public function dossier(){
$stmt = "SELECT count(*) FROM dossier GROUP BY typedossier";
$stmt = $this->db->prepare($stmt);
$rows=$stmt->execute();
$rows = $stmt->fetch(PDO::FETCH_NUM);
return ?????

}

这是我的图表：

var ctx = document.getElementById("myChart");
ctx.width = 400;
ctx.height = 400;
data = {
  datasets: [{
  data: [dataDossierRepartitionType, 20],
  backgroundColor: [
  'rgb(255, 99, 132)',
  'rgb(54, 162, 235)',
  ],
  borderColor: [
  'white',
  'white',
  ],
  borderWidth: 1
  }],

  // These labels appear in the legend and in the tooltips when hovering        different arcs
  labels: [
    'Red',
    'Blue',
  ]
  };
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: {
legend: {
labels: {
    fontColor: "white",
    fontSize: 18
}
},
maintainAspectRatio: false,
responsive: false
}
});

Route.php

$app->post('/stats', function () use ($app) {
session_start();
if(isset($_POST['method']) && !empty($_POST['method'])) {
  $method = $_POST['method'];
  switch($method) {
    case 'dossierRepartitionType' :
     $dossiers=$app['dao.dossier']->dossierRepartitionType();
     break;
    }
  }
  return new ResponseSilex("$dossiers");
 });

因此，我的AJAX调用路由，然后将函数的结果放入

$dossiers

，在响应中输出，我做得对吗

如何返回包含每个计数的所有数据值的数组？ 我努力捕捉错误并找到将MYSQL计数值绑定到图表的正确方法

---

谢谢

主要思想是您应该在模型中格式化数据，然后通过

JSON\u encode

将JSON返回前端。之后，您将解析ajax返回中的json，然后将适当的数据传递到图表。

您可以从php发送

json

数据

试试这个：

public function dossier(){
    $stmt = "SELECT count(*) FROM dossier GROUP BY typedossier";
    $stmt = $this->db->prepare($stmt);
    $rows=$stmt->execute();
    $rows = $stmt->fetch(PDO::FETCH_NUM);
    exit(json_encode(array('counts' => $rows)));
}

$.ajax({ url: 'stats',
   data: {method: 'dossierRepartitionType'},
   type: 'post',
   datatype: 'json',
   success: function(output) {
      if (output.counts) {
        dataDossierRepartitionType=output.counts.join();
        alert(dataDossierRepartitionType)
        initCharts(dataDossierRepartitionType);
      }
   },
   error: function () {
                 alert("Oops there is an error.");
  }});

function initCharts(dataDossierRepartitionType){
    var ctx = document.getElementById("myChart");
    ctx.width = 400;
    ctx.height = 400;
    data = {
      datasets: [{
      data: [dataDossierRepartitionType, 20],
      backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      ],
      borderColor: [
      'white',
      'white',
      ],
      borderWidth: 1
      }],

      // These labels appear in the legend and in the tooltips when hovering        different arcs
      labels: [
        'Red',
        'Blue',
      ]
      };
    var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
    legend: {
    labels: {
        fontColor: "white",
        fontSize: 18
    }
    },
    maintainAspectRatio: false,
    responsive: false
    }
    });
}

Php:

public function dossier(){
    $stmt = "SELECT count(*) FROM dossier GROUP BY typedossier";
    $stmt = $this->db->prepare($stmt);
    $rows=$stmt->execute();
    $rows = $stmt->fetch(PDO::FETCH_NUM);
    exit(json_encode(array('counts' => $rows)));
}

$.ajax({ url: 'stats',
   data: {method: 'dossierRepartitionType'},
   type: 'post',
   datatype: 'json',
   success: function(output) {
      if (output.counts) {
        dataDossierRepartitionType=output.counts.join();
        alert(dataDossierRepartitionType)
        initCharts(dataDossierRepartitionType);
      }
   },
   error: function () {
                 alert("Oops there is an error.");
  }});

function initCharts(dataDossierRepartitionType){
    var ctx = document.getElementById("myChart");
    ctx.width = 400;
    ctx.height = 400;
    data = {
      datasets: [{
      data: [dataDossierRepartitionType, 20],
      backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      ],
      borderColor: [
      'white',
      'white',
      ],
      borderWidth: 1
      }],

      // These labels appear in the legend and in the tooltips when hovering        different arcs
      labels: [
        'Red',
        'Blue',
      ]
      };
    var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
    legend: {
    labels: {
        fontColor: "white",
        fontSize: 18
    }
    },
    maintainAspectRatio: false,
    responsive: false
    }
    });
}

ajax成功完成后，您需要在成功回调中初始化图表插件，如下所示：

Ajax:

public function dossier(){
    $stmt = "SELECT count(*) FROM dossier GROUP BY typedossier";
    $stmt = $this->db->prepare($stmt);
    $rows=$stmt->execute();
    $rows = $stmt->fetch(PDO::FETCH_NUM);
    exit(json_encode(array('counts' => $rows)));
}

$.ajax({ url: 'stats',
   data: {method: 'dossierRepartitionType'},
   type: 'post',
   datatype: 'json',
   success: function(output) {
      if (output.counts) {
        dataDossierRepartitionType=output.counts.join();
        alert(dataDossierRepartitionType)
        initCharts(dataDossierRepartitionType);
      }
   },
   error: function () {
                 alert("Oops there is an error.");
  }});

function initCharts(dataDossierRepartitionType){
    var ctx = document.getElementById("myChart");
    ctx.width = 400;
    ctx.height = 400;
    data = {
      datasets: [{
      data: [dataDossierRepartitionType, 20],
      backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      ],
      borderColor: [
      'white',
      'white',
      ],
      borderWidth: 1
      }],

      // These labels appear in the legend and in the tooltips when hovering        different arcs
      labels: [
        'Red',
        'Blue',
      ]
      };
    var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
    legend: {
    labels: {
        fontColor: "white",
        fontSize: 18
    }
    },
    maintainAspectRatio: false,
    responsive: false
    }
    });
}

最后将图表初始化代码包装到回调函数中

图表：

public function dossier(){
    $stmt = "SELECT count(*) FROM dossier GROUP BY typedossier";
    $stmt = $this->db->prepare($stmt);
    $rows=$stmt->execute();
    $rows = $stmt->fetch(PDO::FETCH_NUM);
    exit(json_encode(array('counts' => $rows)));
}

$.ajax({ url: 'stats',
   data: {method: 'dossierRepartitionType'},
   type: 'post',
   datatype: 'json',
   success: function(output) {
      if (output.counts) {
        dataDossierRepartitionType=output.counts.join();
        alert(dataDossierRepartitionType)
        initCharts(dataDossierRepartitionType);
      }
   },
   error: function () {
                 alert("Oops there is an error.");
  }});

function initCharts(dataDossierRepartitionType){
    var ctx = document.getElementById("myChart");
    ctx.width = 400;
    ctx.height = 400;
    data = {
      datasets: [{
      data: [dataDossierRepartitionType, 20],
      backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      ],
      borderColor: [
      'white',
      'white',
      ],
      borderWidth: 1
      }],

      // These labels appear in the legend and in the tooltips when hovering        different arcs
      labels: [
        'Red',
        'Blue',
      ]
      };
    var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
    legend: {
    labels: {
        fontColor: "white",
        fontSize: 18
    }
    },
    maintainAspectRatio: false,
    responsive: false
    }
    });
}

---

这很容易，您需要像这样修改php代码：

    public function dossier(){
$stmt = "SELECT count(*) as total FROM dossier";
$stmt = $this->db->prepare($stmt);
$rows=$stmt->execute();
$number_of_rows = $rows->fetchColumn(); 

return json_encode(["total" => $number_of_rows]);

dataDossierRepartitionType=output.total;

在ajax请求中，您指定了一个“json”返回，因此在脚本中php需要返回一个json

$.ajax({ url: 'stats',
   data: {method: 'dossierRepartitionType'},
   type: 'post',
   datatype: 'json',
   success: function(output) {
               dataDossierRepartitionType=output.total;
             },
   error: function () {
                 alert("Oops there is an error.");
  }});

您应该能够使用此结构从php接收json

{total: rows_total}

因此，在ajax响应中，您将收到答案，您可以获得如下数据：

    public function dossier(){
$stmt = "SELECT count(*) as total FROM dossier";
$stmt = $this->db->prepare($stmt);
$rows=$stmt->execute();
$number_of_rows = $rows->fetchColumn(); 

return json_encode(["total" => $number_of_rows]);

dataDossierRepartitionType=output.total;

---

对不起，我的英语不好，希望能帮助你

另外，让我知道

警报（datadossierreptiontype）

的输出是什么？因此，我们可以确保ajax返回正确的响应上述解决方案是否适合您？如果是这样的话，请将此答案标记为有用，以便对其他人也有帮助：）否则请让我知道

alert（datadossierepartitiontype）

您好，很抱歉回答太长，我不在我的主计算机上，我没有从您给我的代码中获得任何输出，无论是错误还是成功，我已经在ajax调用中添加了一个路由（我使用Silex）来生成所需的JSON输出