Javascript 如何将php mysql数据正确传递给ChartJs

我希望能够使用ChartJs生成条形图和饼图。我正在使用php和mysql获取数据。我想制作的条形图是一个图表，显示了男女学生的统计数据以及学生总数。以下是我希望结果显示方式的示例：

它可能不完全像它，但我觉得它提供了一个想法。我的代码有问题，但我似乎不理解，因为我是ChartJs的新手，只是在尝试，因为morris.js没有得到完全支持。下面是我的代码的外观：

Html

data.php

$query = "SELECT  
            SUM(CASE WHEN gender = 'Male' THEN 1 ELSE 0 END) as Male,
            SUM(CASE WHEN gender = 'Female' THEN 1 ELSE 0 END) as Female
          FROM students";

$output = array();

if ($result = mysqli_query($connection, $query)) {
    # code...
    foreach ($result as $row) {
        # code...
        $output[] = $row;
    }
} else {
    die("There was a problem". mysqli_error($connection));
}

echo json_encode($output);

下面是我从控制台得到的结果：

[{“男”：“5”，“女”：“2”}]

如果您能给我一些建议，我会很感激的，我可以把它做得更好，也可以把饼图做得更好

根据我所做的，这是我的图表的显示方式：

---

注意请忽略照片上的频率。

建议您将sql查询更改为以下内容

$query = "select gender,count(gender) as count from students group by gender";
$output = array();

if ($result = mysqli_query($connection, $query)) {
    # code...
    foreach ($result as $row) {
        # code...
        $output[] = $row;
    }
} else {
    die("There was a problem". mysqli_error($connection));
}

echo json_encode($output);

脚本：

$.ajax({
      url: 'data.php',
      type: 'GET',
      success:function(data){
        console.log(data);

        var gender = [];
        var sum = [];

        for(var count in data){
          gender.push(data[count].gender);
          sum.push(data[count].total);
        }

        var chartdata = {
            labels: gender,
            datasets: [
              {
                label: 'Student Gender',
                backgroundColor: 'rgba(200, 200, 200, 0.75)',
                borderColor: 'rgba(200, 200, 200, 0.75)',
                hoverbackgroundColor: 'rgba(200, 200, 200, 1)',
                hoverborderColor: 'rgba(200, 200, 200, 1)',
                data:sum
              }
            ] 
        };

        var ctx = $('#mycanvas');

        var barGraph = new Chart(ctx, {
          type:'bar',
          data: chartdata
        });
      },
      error:function(data){
        console.log(data);
      }
    });

---

我意识到问题出在我的剧本上。非常感谢@milan kumar对查询的帮助。缺少的是我发送给ajax的数据类型的规范。我所要做的就是在success函数之前添加值为“json”的数据类型，它可以完美地工作。代码应该是这样的：

脚本：

$.ajax({
      url: 'data.php',
      type: 'GET',
      // this was what I needed to make it work.
      dataType: 'json',
      success:function(data){

        var gender = [];
        var sum = [];

        for(var i in data){
          gender.push(data[i].gender);
          sum.push(data[i].total);
        }

        var ChartData = {
            labels: ['Student Gender'],
            datasets: [
              {
                label: gender[0],
                fillColor: "rgba(210, 214, 222, 1)",
                strokeColor: "rgba(210, 214, 222, 1)",
                pointColor: "rgba(210, 214, 222, 1)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data:sum[0]
              },
              {
                label: gender[1],
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "rgba(60,141,188,0.8)",
                pointColor: "#3b8bba",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data:sum[1]
              }
            ] 
        };
      });

---

我添加了一些可选属性来美化我的图表。

我采用了我的代码来匹配你的代码，这是我从控制台得到的结果：[{“性别”：“女性”，“总数”：“2”}，{“性别”：“男性”，“总数”：“5”}]，但图表仍然显示相同的内容。我更新了代码，因为你将“总数”作为第二个字段。。现在检查..我有完全相同的问题，但是数据类型：“json”只传递了一个错误：{readyState:4，getResponseHeader:ƒ，getAllResponseHeaders:ƒ，setRequestHeader:ƒ，OverrideMeimetype:ƒ，…你能帮我一下吗？我的解决方案是：我必须从mysql解码json（$data）

$.ajax({
      url: 'data.php',
      type: 'GET',
      success:function(data){
        console.log(data);

        var gender = [];
        var sum = [];

        for(var count in data){
          gender.push(data[count].gender);
          sum.push(data[count].total);
        }

        var chartdata = {
            labels: gender,
            datasets: [
              {
                label: 'Student Gender',
                backgroundColor: 'rgba(200, 200, 200, 0.75)',
                borderColor: 'rgba(200, 200, 200, 0.75)',
                hoverbackgroundColor: 'rgba(200, 200, 200, 1)',
                hoverborderColor: 'rgba(200, 200, 200, 1)',
                data:sum
              }
            ] 
        };

        var ctx = $('#mycanvas');

        var barGraph = new Chart(ctx, {
          type:'bar',
          data: chartdata
        });
      },
      error:function(data){
        console.log(data);
      }
    });

$.ajax({
      url: 'data.php',
      type: 'GET',
      // this was what I needed to make it work.
      dataType: 'json',
      success:function(data){

        var gender = [];
        var sum = [];

        for(var i in data){
          gender.push(data[i].gender);
          sum.push(data[i].total);
        }

        var ChartData = {
            labels: ['Student Gender'],
            datasets: [
              {
                label: gender[0],
                fillColor: "rgba(210, 214, 222, 1)",
                strokeColor: "rgba(210, 214, 222, 1)",
                pointColor: "rgba(210, 214, 222, 1)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data:sum[0]
              },
              {
                label: gender[1],
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "rgba(60,141,188,0.8)",
                pointColor: "#3b8bba",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data:sum[1]
              }
            ] 
        };
      });