如何在 x axix 的 CanvasJs 图表中显示日期-解网

问：

我想从contol_data表中获取日期和贷款余额，并在图表中显示数据，其中日期在 x 轴上，贷款余额在 y 轴上。我可以显示贷款金额，但不能显示日期详细信息

            <?php

            // load database credentials
            require_once realpath(__DIR__. "/vendor/autoload.php");
            use Dotenv\Dotenv;

            $dotenv = Dotenv::createImmutable(__DIR__);
            $dotenv ->load();
            $db_username    = $_ENV['DB_USERNAME'];
            $db_password    = $_ENV['DB_PASSWORD'];
            $db_host        = $_ENV['DB_HOST'];

            $mysqli = new mysqli($db_host, $db_username, $db_password,'pawn_db') or die(mysqli_error($mysqli));

            // obtain data
            $result = $mysqli->query("SELECT * FROM control_data WHERE BRANCH_ID = '1' AND DataDate >= '2021-01-01' AND  DataDate <= '2021-01-31' AND Loan <>0") or die($mysqli->error);

            echo mysqli_num_rows($result);  
            // data to an array
    
            $dataPoints = array();
            if(mysqli_num_rows($result) > 0){

                // create an arry with results
                    
                while($row = mysqli_fetch_array($result))
                {    
                    //$currentDate =date(strtotime($row['DataDate'] ));  
                    $date = ($row['DataDate']);
                
                    $point = array("x" => date('d-m',strtotime($date)) , "y" => $row['Loan']);
                    
                    array_push($dataPoints, $point);        
                }
                }


            ?>
            <!DOCTYPE HTML>
            <html>
            <head>  
            <script>
            window.onload = function () {

            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                exportEnabled: true,
                theme: "light1", // "light1", "light2", "dark1", "dark2"
                title:{
                    text: "Simple Column Chart with Index Labels"
                },
                axisY:{
                    includeZero: true
                },
                data: [{
                    type: "column", //change type to bar, line, area, pie, etc
                    //indexLabel: "{y}", //Shows y value on all Data Points
                    indexLabelFontColor: "#5A5757",
                    indexLabelPlacement: "outside",   
                    dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
                }]
            });
            chart.render();
            
            }
            </script>
            </head>
            <body>
            <div id="chartContainer" style="height: 370px; width: 100%;"></div>
            <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
            </body>
            </html>

我期望在 x 轴上有一个带有日期的条形图。但什么也没显示。Howener，如果我将数据转换为 strtotime，则可以支付图表。但是我希望日期可以消除 strtotime 数据。

日期画布JS

要显示带有时间轴的图表，您需要通过将 PHP 时间戳乘以 1000 将 PHP 时间戳转换为 javascript 时间戳。此外，在将时间戳传递给数据点时，需要将 xValueType 设置为 dateTime。如果要以“d-m”格式显示轴标签，请将 axisX 的 valueFormatString 设置为。strtotime($date)DD-MM

上一个：CanvasJS 图表在首页加载时未更新

下一个：从 API 获取数据并使用 canvas.js + angular 显示数据

如何在 x axix 的 CanvasJs 图表中显示日期

How can I display the date in a CanvasJs chart in the x axix

评论