如何实现用户选择日历日期后更新CanvasJS图表？

1. 前端添加日期选择器并封装图表更新逻辑 #

先在页面中加入日期选择控件，再把图表渲染逻辑封装成可复用函数，方便根据选中日期重新请求数据：

<!-- 新增日期选择器 -->
<input type="date" id="datePicker">

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

// 封装图表更新函数，接收选中日期作为参数
function updateChart(selectedDate) {
    $.getJSON("chart.php", { date: selectedDate }, function(data) {
        var chart = new CanvasJS.Chart("chartContainer", {
            data: [{                              
                indexLabel: " {y}",
                indexLabelFontSize: 16,
                dataPoints: data
            }]
        });
        chart.render();
    });
}

// 页面加载时默认加载当日数据
$(document).ready(function() {
    var today = new Date().toISOString().split('T')[0]; // 格式化当前日期为YYYY-MM-DD
    updateChart(today);
    
    // 监听日期选择变化，触发图表更新
    $("#datePicker").on("change", function() {
        var selectedDate = $(this).val();
        updateChart(selectedDate);
    });
});

2. 修改PHP代码接收日期参数并调整数据库查询 #

更新chart.php，接收前端传递的日期参数，将其加入查询条件，同时用预处理语句避免SQL注入：

include("config.php");

$data_points = array();

// 获取前端传递的日期，默认使用当前日期
$selectedDate = isset($_GET['date']) ? $_GET['date'] : date('Y-m-d');

// 预处理查询语句，替换date_column为你表中实际的日期字段名
$query = "SELECT sub, main, SUM(amount) AS total 
          FROM data 
          WHERE DATE(date_column) = ? 
          GROUP BY sub, main 
          ORDER BY total desc 
          LIMIT 15";

$stmt = mysqli_prepare($con, $query);
mysqli_stmt_bind_param($stmt, "s", $selectedDate);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

while($row = mysqli_fetch_array($result)) {        
    $point = array("label" => $row['sub'], "y" => $row['total']);
    array_push($data_points, $point);        
}

echo json_encode($data_points, JSON_NUMERIC_CHECK);

// 清理资源
mysqli_stmt_close($stmt);
mysqli_close($con);

提示：务必将代码中的date_column替换为你数据库表中存储日期的实际字段名。

3. 核心注意事项 #

• 日期格式统一：前端传递的是YYYY-MM-DD格式，确保数据库字段格式与之匹配；
• 安全规范：必须使用预处理语句，杜绝SQL注入风险；
• 扩展支持：如果需要日期范围查询，可改为两个日期输入框，前端传递startDate和endDate，PHP查询条件调整为WHERE DATE(date_column) BETWEEN ? AND ?。

内容的提问来源于stack exchange，提问作者rcweb