Question

我有两个文件，index.php和showday.php。

index.php应该在canvasjs的帮助下显示图形

canvasjs的数据来自showday.php，它运行MySQL查询以提取数据

当年，月和日变量在showday.php中具有硬编码值时，此处显示的文件会显示正确的图形，因此我知道该概念有效。

我的问题是： - 如何加载index.php并将当前日期发送到showday.php，以及 - 如何使用datepicker

选择的新日期刷新$.getJSON

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jqueryui/themes/sunny/jquery-ui.css">
    <link rel="stylesheet" href="jqueryui/style.css">
    <script src="jquery/jquery-3.1.0.js"></script>
    <script src="jqueryui/jquery-ui.js"></script>
    <script src="canvas/jquery.canvasjs.min.js"></script>
    <script>

    $( function() {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
    } );


I guess that changedate function goes here with new date.
But how to put that date in the call to:
$.getJSON("showday.php", function (result) ???

Also, I would like that the page loads with current date,
and then a user can refresh the graph with a chosen date
with help of datepicker. How to do that?

    $(document).ready(function ()
        {

            $.getJSON("showday.php", function (result)
                {
                    var chart = new CanvasJS.Chart("chartContainer",
                        {
                            zoomEnabled: true,
                            axisY:{
                                title: "Power",
                                includeZero: false,
                                suffix : " kW",
                                },
                            axisX: {
                                title: "Time",
                                },
                            data: [
                                {
                                    type: "spline",
                                    lineColor: "#FFAA00",
                                    lineThickness: 2,
                                    markerColor: "#007700",
                                    dataPoints: result
                                }
                            ]
                        }
                    );
                    chart.render();
                }
            );
        }
    );

    </script>
</head>

<body>
<div id="chartContainer" style="width: 800px; height: 400px;"></div>
<form action="">
    Date: <input type="text" id="datepicker" onchange="changedate(this.value)">
</form>

</body>
</html>

showday.php

<?php

    $con = mysqli_connect('localhost', 'db', 'password', 'table');

// Check connection
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $data_points = array();

**How the new date vlues coming from index.php can be plugged in here?**

    $query = "SELECT Hour, Minute, PAC as kW FROM `logdata` WHERE (Year=?) AND (Month=?) AND (Day=?)";
    $result = mysqli_query($con, $query);

    while($row = mysqli_fetch_array($result))
    {   
    $Time = $row['Hour'].":".$row['Minute'];
        $point = array("label" => $Time , "y" => $row['kW']);

        array_push($data_points, $point);        
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);

?>

Answer 1

创建一个函数：

function updateChart() {
    $.getJSON("showday.php", {date: $('#datepicker').datepicker('getDate')}, function (result)
            {
                var chart = new CanvasJS.Chart("chartContainer",
                    {
                        zoomEnabled: true,
                        axisY:{
                            title: "Power",
                            includeZero: false,
                            suffix : " kW",
                            },
                        axisX: {
                            title: "Time",
                            },
                        data: [
                            {
                                type: "spline",
                                lineColor: "#FFAA00",
                                lineThickness: 2,
                                markerColor: "#007700",
                                dataPoints: result
                            }
                        ]
                    }
                );
                chart.render();
            }
        );
}

在datepicker select和updateChart()上致电$(document).ready()。通过传递一个对象作为第二个参数来Pass data through $.getJSON。

使用date通过php访问showday.php（在$_GET['date']中）。有关如何从提供的字符串中提取年份/日期/月，请参阅this post。

使用来自datepicker

1 个答案: