將 mysql x 軸日期更改為 chart.js 中的日期

Question

所以我有這段代碼，它在 chart.js 中顯示了我的 Mysql 數據。

基本上一切正常，但我只想將日期更改為幾天

這就是我當前的圖表，這就是我想要實現的目標我的目標無論我嘗試什么，我都得不到我想要的結果。 這是我的所有代碼：

圖.php

<?php
header('Content-Type: application/json');
require 'config/db.php';
$query = sprintf("SELECT * FROM (SELECT pageid, pagehits, pagedate FROM pagehits ORDER BY pagedate DESC LIMIT 7) sub ORDER BY pagedate ASC");

$result = $conn->query($query);
$data = array();
foreach ($result as $page_row) {
    $data[] = $page_row;
}

$result->close();
$conn->close();

print json_encode($data);

圖.html

<!DOCTYPE html>
<html>
<head>
    <title>ChartJS - LineGraph</title>
    <style>
        .chart-container {
            width: 640px;
            height: auto;
        }
    </style>
</head>
<body>
<div class="chart-container">
    <canvas id="mycanvas"></canvas>
</div>

<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="chart.js"></script>
</body>
</html>

chart.js

$(document).ready(function(){
    $.ajax({
        url : "chart.php",
        type : "GET",
        success : function(data){
            console.log(data);

            var pagedate = [];
            var pagehits = [];
            for(var i in data) {
                pagedate.push( data[i].pagedate);
                pagehits.push(data[i].pagehits);
            }

            var chartdata = {
                labels: pagedate,
                datasets: [
                    {
                        label: "pagehits",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(59, 89, 152, 0.75)",
                        borderColor: "rgba(59, 89, 152, 1)",
                        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                        data: pagehits
                    },
                ]
            };

            var ctx = $("#mycanvas");

            var LineGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });
        },
        error : function(data) {

        }
    });
});

有什么辦法解決我的問題嗎？？ 我將不勝感激任何答案！ 謝謝！！

Answer 1

您可以使用DateTime對象將日期轉換為 PHP 代碼中的星期幾：

foreach ($result as $page_row) {
    $page_row['pagedate'] = (new DateTime($page_row['pagedate']))->format('l');
    $data[] = $page_row;
}

Answer 2

似乎問題出在圖表數據（ labels: pagedate ）下的 chart.js 內。 根據這篇文章，您可以單獨編寫一個 function 將日期轉換為其相應的指定日期。

JS中日期的日期名稱

然后只需將其更改為labels: myFunction(pagedate)

將 mysql x 軸日期更改為 chart.js 中的日期

問題描述

2 個解決方案

解決方案1
1 已采納 2020-12-30 23:40:13

解決方案2
0 2020-12-30 23:38:54

將 mysql x 軸日期更改為 chart.js 中的日期

問題描述

2 個解決方案

解決方案1 1 已采納 2020-12-30 23:40:13

解決方案2 0 2020-12-30 23:38:54

解決方案1
1 已采納 2020-12-30 23:40:13

解決方案2
0 2020-12-30 23:38:54