ChartJS 在 X 轴上显示不正确的数据答案

【问题标题】：ChartJS showing incorrect data on the X-AxesChartJS 在 X 轴上显示不正确的数据
【发布时间】：2021-10-15 18:46:18
【问题描述】：

我需要 ChartJS 的帮助，它显示了几个月的数据，这些数据甚至在我的 MySQL 数据库中都不存在。数据库里有8月和9月的数据，其余月份没有数据，为什么显示其他月份的数据？

这是使用 ChartJS 的仪表板的更新视图

Ecems Dashboard

这是我的 MySQL 表内容：

MySQL Database

我的 index.php 文件：

<?php include 'settings.php'; //include settings ?>

<body class="crm_body_bg">
<!-- main content part here -->
<section class="main_content dashboard_part">
        <!-- menu  -->
    <div class="container-fluid no-gutters">
        <div class="row">
            <div class="col-lg-12 p-0 ">
                <div class="header_iner d-flex justify-content-between align-items-center">
                    <div class="sidebar_icon d-lg-none">
                        <i class="ti-menu"></i>
                    </div>
                    <div class="serach_field-area">
                            <div class="search_inner">
                                <form action="#">
                                    <div class="search_field">
                                        <input type="text" placeholder="Search here..." >
                                    </div>
                                    <button type="submit"> <img src="img/icon/icon_search.svg" alt=""> </button>
                                </form>
                            </div>
                        </div>
                    <div class="header_right d-flex justify-content-between align-items-center">
                    <div class="profile_info">
                             <img src="../../img/<?php $ufunc->UserName(); //Show name who is in session user?>.jpg" alt="#">
                            <div class="profile_info_iner">
                                <div class="profile_author_name">
                                <h5><?php $ufunc->UserName(); //Show name who is in session user?></h5>
                                </div>
                                <div class="profile_info_details">
                                    <a href="#">My Profile </a>
                                    <a href="#">Settings</a>
                                   <a href="../../includes/logout.php">Logout</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ menu  -->
    <div class="main_content_iner ">
        <div class="container-fluid p-0 sm_padding_15px">
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="dashboard_header mb_50">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="dashboard_header_title">
                                    <h3>ECEMS v2.0 Administration Dashboard</h3>
                                    <h6>Logged in as: <?php $ufunc->UserName(); //Show name who is in session user?></h6>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="dashboard_breadcam text-right">
                                    <p><a href="#">Dashboard</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-6">
                    <div class="white_box mb_30">
                        <div class="box_header">
                            <div class="main-title">
                                <h3 class="mb_25" >General Recyclables Processing Overview</h3>
                            </div>
                           
                        </div>
            
                                    <canvas id="general-recyclables"></canvas>
                       
                    </div>
                </div>
                  
                  <div class="col-lg-6 col-xl-6">
                    <div class="white_box mb_30">
                        <div class="box_header">
                            <div class="main-title">
                                <h3 class="mb_25" >Printed Circuit Boards Processing Overview</h3>
                            </div>
                        
                        </div>
            
                                    <canvas id="general-recyclables2"></canvas>
                       
                    </div>
                </div>
                   <div class="col-lg-4 col-xl-4">
                    <div class="white_box mb_30">
                        <div class="box_header">
                            <div class="main-title">
                                <h3 class="mb_25" >Targets for <?php echo date('F Y'); ?></h3>
                            </div>
                          
                        </div>
            <h3>Target: 12000KG</h3>
            <h3>Current Value:  <?php
$dbConnection = new PDO('mysql:dbname=ecemsmaster;host=127.0.0.1;charset=utf8', 'ecemsmaster', 'ecemsmaster');
$dbConnection->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//The COUNT SQL statement that we will use.
$sql = "SELECT SUM(subgrade ++ castaluminium ++ copper ++ stainlesssteel ++ plastic ++ batteries ++ brass ++ cables ++ lowgradePCB ++ mediumgradePCB ++ highgradePCB) AS num FROM daily_recyclables where MONTH(date)=MONTH(curdate());";

//Prepare the COUNT SQL statement.
$stmt = $dbConnection->prepare($sql);

//Execute the COUNT statement.
$stmt->execute();

//Fetch the row that MySQL returned.
$row = $stmt->fetch(PDO::FETCH_ASSOC);

//The $row array will contain "num". Print it out.
echo $row['num'];
?> KG</h3>
            <h3>Over/Under Target: -1000KG</h3>
            
            <br>
           
                       
                    </div>
                </div>
              <div class="col-lg-4 col-xl-4">
                    <div class="white_box mb_30">
                        <div class="box_header">
                            <div class="main-title">
                                <h3 class="mb_25" >Previous Month</h3>
                            </div>
                          
                        </div>
            <h3>Target: 12000KG</h3>
            <h3>Previous Value:  <?php
$dbConnection = new PDO('mysql:dbname=ecemsmaster;host=127.0.0.1;charset=utf8', 'ecemsmaster', 'ecemsmaster');
$dbConnection->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//The COUNT SQL statement that we will use.
$sql = "SELECT SUM(subgrade ++ castaluminium ++ copper ++ stainlesssteel ++ plastic ++ batteries ++ brass ++ cables ++ lowgradePCB ++ mediumgradePCB ++ highgradePCB) AS num FROM daily_recyclables where MONTH(date)=MONTH(curdate())-1;";

//Prepare the COUNT SQL statement.
$stmt = $dbConnection->prepare($sql);

//Execute the COUNT statement.
$stmt->execute();

//Fetch the row that MySQL returned.
$row = $stmt->fetch(PDO::FETCH_ASSOC);

//The $row array will contain "num". Print it out.
echo $row['num'];
?> KG</h3>
            <h3>Over/Under Target: -1000KG</h3>
            
            <br>
           
                       
                    </div>
                </div>
               
            </div>
        </div>
    </div>
    
<?php
require '../../includes/global_footer.html'; //include Global Footer
?>

这是我的更新 linegraph.js 文件，基于 rustyBucketBay 回答 15/10/2021

  $(document).ready(function(){
  $.ajax({
    url : "http://www.ecems.co.za/ecemsv2/user/admin/data.php",
    type : "POST",
    success : function(data){
      console.log(data);

     
      var date = [];
      var subgrade_material = [];
       var castaluminium_material = [];
      var copper_material = [];
       var stainlesssteel_material = [];
        var plastic_material = [];
         var batteries_material = [];
          var brass_material = [];
           var cables_material = [];
           

      for(var i in data) {
        date.push("" + data[i].date);
        subgrade_material.push(data[i].subgrade);
        castaluminium_material.push(data[i].castaluminium);
         copper_material.push(data[i].copper);
          stainlesssteel_material.push(data[i].stainlesssteel);
           plastic_material.push(data[i].plastic);
            batteries_material.push(data[i].batteries);
            brass_material.push(data[i].brass);
              cables_material.push(data[i].cables);
             
      }
var barChartData = {
    labels: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    datasets: [
      {
        label: "Subgrade",
        backgroundColor: "rgba(189,55,220,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      },
       {
        label: "Cast Aluminium",
        backgroundColor: "rgba(89,155,120,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      },
      {
        label: "Copper",
        backgroundColor: "rgba(100,105,20,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      },
       {
        label: "Stainless Steel",
        backgroundColor: "rgba(2,15,12,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      },
       {
        label: "Brass",
        backgroundColor: "rgba(99,99,120,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      },
      // {
      //   label: "Copper",
      //   backgroundColor: "rgba(129,155,20,0.5)",
      //   data: copper_material
      // },
      // {
      //   label: "Stainless Steel",
      //   backgroundColor: "rgba(29,255,55,0.5)",
      //   data: stainlesssteel_material
      // },
      // {
      //   label: "Brass",
      //   backgroundColor: "rgba(0,155,45,0.5)",
      //   data: brass_material
      // }
    ]
  };

var ctx = document.getElementById("general-recyclables").getContext("2d");
var myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
   
    options: {
        title: {
            display: true,
            text: "General Recyclables Overview By Month"
        },
      
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

   
      
      
    },
    
    error : function(data) {

    }
    
  });
  
});
$(document).ready(function(){
  $.ajax({
    url : "http://www.ecems.co.za/ecemsv2/user/admin/data.php",
    type : "POST",
    success : function(data){
      console.log(data);

     
      var date = [];
      var lowgradePCB = [];
       var mediumgradePCB = [];
      var highgradePCB = [];
   

      for(var i in data) {
        date.push("" + data[i].date);
        lowgradePCB.push(data[i].lowgradePCB);
        mediumgradePCB.push(data[i].mediumgradePCB);
        highgradePCB.push(data[i].highgradePCB);
       
      }
var barChartData = {
    labels: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    datasets: [
      {
        label: "Low Grade PCB",
        backgroundColor: "rgba(27,27,235,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      },
       {
        label: "Medium Grade PCB",
        backgroundColor: "rgba(20,170,235,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      },
      {
        label: "High Grade PCB",
        backgroundColor: "rgba(20,235,34,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      },
    
    ]
  };

var ctx = document.getElementById("general-recyclables2").getContext("2d");
var myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
   
    options: {
        title: {
            display: true,
            text: "Printed Circuit Board Processing Overview"
        },
      
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

   
      
      
    },
    
    error : function(data) {

    }
    
  });
  
});

这是我的 data.php 文件：

<?php

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

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'REDACTED');
define('DB_PASSWORD', 'REDACTED');
define('DB_NAME', 'REDACTED');

//get mysqliection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
    die("connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = sprintf("SELECT recID,date,subgrade,castaluminium,copper,stainlesssteel,plastic,batteries,brass,cables,lowgradePCB,mediumgradePCB,highgradePCB FROM daily_recyclables");

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

//free memory associated with result
$result->close();

//close mysqliection
$mysqli->close();

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


?>

【问题讨论】：

似乎您直接将路基和低级PCB值传递给图形（从图形图像推断）。您需要按月排列具有相应 agrupation 的数据，以便数据数组与数据数组的每个索引的标签数组 ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] 对应
@rustyBucketBay 你能帮我举个合适的例子吗？我在这方面确实是新手，并且一直在学习数百个教程，但是如果我可以根据我的代码获得一个合适的示例，那么我的学习曲线将是完整的：D
请参阅下面的答案以解释我的意思
@rustyBucketBay 请看我的编辑。认为我正朝着正确的方向前进。只是在努力显示我的实际数据，而不是硬编码的数字

标签： javascript php html mysqli chart.js

【解决方案1】：

例如，下面 sn-p 中的简化图。每个月的数据按索引分配到图表中。

标签：[“一月”、“二月”、....]
数据：[100, 200, ....]

所以 100 是 1 月，200 是 2 月，依此类推。

我的意思是，您需要传递一个数组，该数组中的数据已经按月份分组，或者是您“硬编码”的数组，或者使用代码进行相应的安排，以使用日期字段检索该数组你的数据库

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<canvas id="chart"></canvas>
<script>
  var barChartData = {
    labels: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    datasets: [
      {
        label: "Subgrade",
        backgroundColor: "rgba(189,55,220,0.5)",
        data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100]
      }
      // {
      //   label: "Cast Aluminium",
      //   backgroundColor: "rgba(29,155,220,0.5)",
      //   data: castaluminium_material
      // },
      // {
      //   label: "Copper",
      //   backgroundColor: "rgba(129,155,20,0.5)",
      //   data: copper_material
      // },
      // {
      //   label: "Stainless Steel",
      //   backgroundColor: "rgba(29,255,55,0.5)",
      //   data: stainlesssteel_material
      // },
      // {
      //   label: "Brass",
      //   backgroundColor: "rgba(0,155,45,0.5)",
      //   data: brass_material
      // }
    ]
  };

  var ctx = document.getElementById("chart").getContext("2d");
  var myBar = new Chart(ctx, {
    type: "bar",
    data: barChartData,
    options: {
      title: {
        display: true,
        text: "General Recyclables Overview By Month"
      },
      tooltips: {
        mode: "label"
        // callbacks: {
        //   label: function (tooltipItem, data) {
        //     var corporation = data.datasets[tooltipItem.datasetIndex].label;
        //     var valor =
        //       data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        //     var total = 0;
        //     for (var i = 0; i < data.datasets.length; i++)
        //       total += data.datasets[i].data[tooltipItem.index];
        //     if (tooltipItem.datasetIndex != data.datasets.length - 1) {
        //       return (
        //         corporation +
        //         " : KG" +
        //         valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
        //       );
        //     } else {
        //       return [
        //         corporation +
        //           " :" +
        //           valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"),
        //         "Total : " + total + " KG"
        //       ];
        //     }
        //   }
        // }
      },
      responsive: true,
      scales: {
        xAxes: [
          {
            stacked: true
          }
        ],
        yAxes: [
          {
            stacked: true
          }
        ]
      }
    }
  });

  var barChartData = {
    labels: [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ],
    datasets: [
      {
        label: "Low Grade PCB",
        backgroundColor: "rgba(189,55,220,0.5)",
        data: lowgradePCB_material
      },
      {
        label: "Medium Grade PCB",
        backgroundColor: "rgba(29,155,220,0.5)",
        data: mediumgradePCB_material
      },
      {
        label: "Copper",
        backgroundColor: "rgba(129,155,20,0.5)",
        data: highgradePCB_material
      }
    ]
  };

  var ctx = document.getElementById("general-recyclables2").getContext("2d");
  var myBar = new Chart(ctx, {
    type: "bar",
    data: barChartData,
    options: {
      title: {
        display: true,
        text: "Printed Circuit Board Processing"
      },
      tooltips: {
        mode: "label",
        callbacks: {
          label: function (tooltipItem, data) {
            var corporation = data.datasets[tooltipItem.datasetIndex].label;
            var valor =
              data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            var total = 0;
            for (var i = 0; i < data.datasets.length; i++)
              total += data.datasets[i].data[tooltipItem.index];
            if (tooltipItem.datasetIndex != data.datasets.length - 1) {
              return (
                corporation +
                " : KG" +
                valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
              );
            } else {
              return [
                corporation +
                  " :" +
                  valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"),
                "Total : " + total + " KG"
              ];
            }
          }
        }
      },
      responsive: true,
      scales: {
        xAxes: [
          {
            stacked: true
          }
        ],
        yAxes: [
          {
            stacked: true
          }
        ]
      }
    }
  });
</script>

【讨论】：

我想我明白了，请检查编辑 - 这是我的 UPDATED linegraph.js 文件，基于 rustyBucketBay 回答 15/10/2021。所以我明白你现在在说什么。但是当我用我的值替换数字值时，例如 castaluminium_material。什么都没有显示。
不知道为什么现在不渲染。您在答案中有一个工作示例。从一个简单的案例出发，尝试渲染它。然后呈现你想要的信息
不能让它工作:(。使用你的例子和数据：[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100] 是的，它有效，但是使用我自己的 MYSQL 数据，无法正常工作。我将接受您的答案作为答案并发布另一个问题。

【解决方案2】：

尝试修改日期格式问题，查看日期Date.UTC()

【讨论】：