使用 ChartJS 和 PHP 从 mySQL 数据库中分组条形图

Question

index.php - fetches data from mySQL database index.php - 从 mySQL 数据库中获取数据

<?php

header('Content-Type: application/json');

$conn = mysqli_connect('localhost', 'root', '', 'registration');

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$query = sprintf("SELECT ratingid, variety, quality FROM chartdata ORDER BY ratingid");

$result = mysqli_query($conn, $query);

$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

mysqli_close($conn);

print json_encode($data);
?>

app.js应用程序.js

     $(document).ready(function(){
     $.ajax({
     url: "http://localhost/mychart4/index.php",
     method: "GET",
     success: function(data) {
      console.log(data);
      var rating = [];
      var variety = [];
      var quality = [];

      for(var i in data) {
        rating.push(data[i].ratingid);
        variety.push(data[i].variety);
        quality.push(data[i]).quality);
      }

      var chartdata = {
        labels: rating,
        datasets: [
          {
            label: 'Red',
            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: variety
          },
          {
            label: 'Blue',
            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: quality
          }
        ]
      };

      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'bar',
        data: chartdata,
        options: {
          barValueSpacing: 20,
          title: {
                display: true,
                text: 'Variety',
                fontSize: 20
          },
          scales: {
            xAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Rating options'
              }
            }],
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Amount'
              },
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });
    },
    error: function(data) {
      console.log(data);
     }
     });
    });

bargaph.html bargaph.html

<!DOCTYPE html>
<html>
  <head>
      <title>ChartJS - BarGraph</title>
      <style type="text/css">
      #chart-container {
        width: 640px;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div id="chart-container">
      <canvas id="mycanvas"></canvas>
    </div>

    <!-- javascript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>

I'm trying to render a grouped bar chart using ChartJS with values from several columns(variety,quality) in my mySQL database.我正在尝试使用 ChartJS 呈现分组条形图，其中包含来自 mySQL 数据库中几列（品种、质量）的值。 However, the browser does not display anything when I open the HTML file.但是，当我打开 HTML 文件时，浏览器不显示任何内容。 I'm not sure what the issue might be since the bar chart rendered correctly when I tried it with one column(variety).我不确定问题可能是什么，因为当我用一列（品种）尝试它时，条形图呈现正确。 This is the output when I print out the JSON array formed from the data:这是我打印出由数据形成的 JSON 数组时的输出：

[{"ratingid":"1","variety":"8","quality":"1"},{"ratingid":"2","variety":"1","quality":"9"},{"ratingid":"3","variety":"1","quality":"0"},{"ratingid":"4","variety":"11","quality":"11"},{"ratingid":"5","variety":"1","quality":"1"}]

Answer 1

There's a very small mistake in the code that needs to be removed.代码中有一个很小的错误需要删除。

Current Code:当前代码：

quality.push(data[i]).quality);

Correction:更正：

quality.push(data[i].quality);

There's just an additional ')' that needs to be removed and it worked...只有一个额外的 ')' 需要删除并且它起作用了......

Bar Chart条形图

Answer 2

Complete working code as below;完整的工作代码如下；

 <!-- index.php --> <?php header('Content-Type: application/json'); $conn = mysqli_connect('localhost', 'root', '', 'registration'); if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } $query = sprintf("SELECT ratingid, variety, quality FROM chartdata ORDER BY ratingid"); $result = mysqli_query($conn, $query); $data = array(); foreach ($result as $row) { $data[] = $row; } mysqli_close($conn); print json_encode($data);

 //-- app.js $(document).ready(function () { $.ajax({ url: "http://localhost/test/barChart/index.php", method: "GET", success: function (data) { console.log(data); var rating = []; var variety = []; var quality = []; for (var i in data) { rating.push(data[i].ratingid); variety.push(data[i].variety); quality.push(data[i].quality); } var chartdata = { labels: rating, datasets: [{ label: 'Red', backgroundColor: 'rgb(255, 0, 0)', borderColor: 'rgba(200, 200, 200, 0.75)', hoverBackgroundColor: 'rgba(200, 200, 200, 1)', hoverBorderColor: 'rgba(200, 200, 200, 1)', data: variety }, { label: 'Blue', backgroundColor: 'rgb(0, 0, 255)', borderColor: 'rgba(200, 200, 200, 0.75)', hoverBackgroundColor: 'rgba(200, 200, 200, 1)', hoverBorderColor: 'rgba(200, 200, 200, 1)', data: quality } ] }; var ctx = $("#mycanvas"); var barGraph = new Chart(ctx, { type: 'bar', data: chartdata, options: { barValueSpacing: 20, title: { display: true, text: 'Variety', fontSize: 20 }, scales: { xAxes: [{ scaleLabel: { display: true, labelString: 'Rating options' } }], yAxes: [{ scaleLabel: { display: true, labelString: 'Amount' }, ticks: { beginAtZero: true } }] } } }); }, error: function (data) { console.log(data); } }); });

 <!-- bargraph.html --> <!DOCTYPE html> <html> <head> <title>ChartJS - BarGraph</title> <style type="text/css"> #chart-container { width: 640px; height: auto; } </style> </head> <body> <div id="chart-container"> <canvas id="mycanvas"></canvas> </div> <!-- javascript --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>

使用 ChartJS 和 PHP 从 mySQL 数据库中分组条形图

问题描述

2 个解决方案

解决方案1
1 2019-03-09 21:09:02

解决方案2
1 2019-03-09 21:23:36

使用 ChartJS 和 PHP 从 mySQL 数据库中分组条形图

问题描述

2 个解决方案

解决方案1 1 2019-03-09 21:09:02

解决方案2 1 2019-03-09 21:23:36

解决方案1
1 2019-03-09 21:09:02

解决方案2
1 2019-03-09 21:23:36