使用 chart.js、php 和 mysql 创建分组条形图答案

【问题标题】：Create grouped-bar using chart.js, php and mysql使用 chart.js、php 和 mysql 创建分组条形图
【发布时间】：2020-09-10 09:23:51
【问题描述】：

我在mysql中有这样的表最大用户：

我想使用 chart.js 创建分组条形图。

我已经创建了这样的代码：

<html>
  <head>
<script src="Chart.min.js"></script>
</head>


<body>
<center>


<?php
    include 'conn.php';
    $sql = "Select date, user, sum(total) as total from user_biggest group by date,user";
#       $sql = "SELECT difference, date FROM `biggest_user`";
    $date = $conn->query($sql);
    $user = $conn->query($sql);
    $total = $conn->query($sql);
?>

<canvas id="bar-chart-grouped" width="1000" height="250"></canvas>

<script>
new Chart(document.getElementById("bar-chart-grouped"), {
    type: 'bar',
    data: {
                labels: [<?php while($a = mysqli_fetch_array($date)) { echo '"' . $a['date'] . '",'; } ?>],
      datasets: [
        {
          label: "Total",
          backgroundColor: "#3e95cd",
          data: [<?php while($b = mysqli_fetch_array($total)) { echo $b['total'] . ', '; } ?>]
    },

    {
          label: "User",
          backgroundColor: "#8e5ea2",
          data: [<?php while($c = mysqli_fetch_array($user)) { echo $b['user'] . ', '; } ?>]
    }

      ]
    },
    options: {
      title: {
        display: true,
        text: 'Biggest User (Megabytes)'
      }
    }
});
</script>

但是结果图是这样的：

我认为这不是分组条形图。但我不知道我的代码有什么问题。

【问题讨论】：

标签： php charts chart.js bar-chart

【解决方案1】：

很遗憾，我对php 了解不多。所以我只能部分回答你的问题。

data.labels 应包含每天的条目。您还需要为每个用户提供一个dataset，仅此而已。

请看下面的代码 sn-p 看看它是如何工作的。

new Chart("chart", {
  type: 'bar',
  data: {
    labels: ["01-Sep-20", "02-Sep-20", "03-Sep-20"],
    datasets: [{
      label: "cs",
      backgroundColor: "red",
      data: [229, 200, 198]
    },
    {
      label: "finance",
      backgroundColor: "green",
      data: [162, 150, 178]
    },
    {
      label: "credit",
      backgroundColor: "blue",
      data: [89, 156, 90]
    },
    {
      label: "it",
      backgroundColor: "orange",
      data: [89, 55, 112]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>

【讨论】：

如果数据不是动态的，您的代码是正确的。但是感谢您的回答，因为它启发了我。