函数执行后同页面展示数组及日期筛选图表数据回显问题

看起来你已经搞定了数据筛选的核心部分，剩下的就是把处理好的数组带回页面渲染，同时让图表根据筛选日期更新数据。我分后端和前端两部分给你梳理清楚：

一、后端：处理请求并返回原页面带数据 #

这里我分两种常见场景给你示例，你可以根据自己用的框架/技术栈选：

如果你用 Laravel 框架 #

在对应控制器的方法里，接收前端传的日期参数，筛选出数据后直接返回原视图，同时把数据和选中的日期传递过去（方便表单回显）：

public function handleGraphFilter(Request $request)
{
    // 先验证日期参数的合法性（可选，但推荐）
    $request->validate([
        'from' => 'required|date',
        'to' => 'required|date|after_or_equal:from',
    ]);

    // 调用你已经写好的逻辑，获取筛选后的数组
    $chartData = $this->getFilteredChartData($request->from, $request->to);

    // 返回原页面，把数据和选中的日期传给视图
    return view('grapghhehe', [
        'chartData' => $chartData,
        'selectedFrom' => $request->from,
        'selectedTo' => $request->to
    ]);
}

如果你用原生 PHP #

可以借助 Session 临时存储数据，然后重定向回原页面：

// 处理筛选请求的 PHP 文件（比如 filter-graph.php）
session_start();

// 获取前端传的日期
$from = $_GET['from'] ?? '';
$to = $_GET['to'] ?? '';

// 调用你的数据筛选逻辑
$chartData = getFilteredChartData($from, $to);

// 把数据存到 Session
$_SESSION['chartData'] = $chartData;
$_SESSION['selectedFrom'] = $from;
$_SESSION['selectedTo'] = $to;

// 重定向回原页面
header('Location: grapghhehe.php');
exit;

然后在 grapghhehe.php 里取出数据并清理 Session：

session_start();
$chartData = $_SESSION['chartData'] ?? [];
$selectedFrom = $_SESSION['selectedFrom'] ?? '';
$selectedTo = $_SESSION['selectedTo'] ?? '';

// 用完清空 Session，避免残留数据影响下次请求
unset($_SESSION['chartData'], $_SESSION['selectedFrom'], $_SESSION['selectedTo']);

二、前端：表单回显与图表渲染 #

1. 日期表单（支持回显用户选中的日期） #

<!-- Laravel 写法 -->
<form method="GET" action="{{ route('graph.filter') }}">
    <div>
        <label for="from">起始日期:</label>
        <input type="date" id="from" name="from" value="{{ $selectedFrom ?? '' }}" required>
    </div>
    <div>
        <label for="to">结束日期:</label>
        <input type="date" id="to" name="to" value="{{ $selectedTo ?? '' }}" required>
    </div>
    <button type="submit">筛选数据</button>
</form>

<!-- 原生 PHP 写法 -->
<form method="GET" action="filter-graph.php">
    <div>
        <label for="from">起始日期:</label>
        <input type="date" id="from" name="from" value="<?php echo $selectedFrom; ?>" required>
    </div>
    <div>
        <label for="to">结束日期:</label>
        <input type="date" id="to" name="to" value="<?php echo $selectedTo; ?>" required>
    </div>
    <button type="submit">筛选数据</button>
</form>

2. 柱状图渲染（以 Chart.js 为例） #

先引入 Chart.js，然后把后端传递的数组转换成图表能识别的数据：

<canvas id="barChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 把后端的数组转成前端可用的格式
    // Laravel 写法
    const chartData = @json($chartData);
    // 原生 PHP 写法：const chartData = <?php echo json_encode($chartData); ?>;

    // 初始化柱状图
    const ctx = document.getElementById('barChart').getContext('2d');
    const barChart = new Chart(ctx, {
        type: 'bar',
        data: {
            // 这里的标签可以根据你的业务调整，比如如果是按日期筛选，就用筛选范围内的日期数组
            // 暂时用序号示例，你可以改成对应的分类/日期
            labels: Array.from({length: chartData.length}, (_, i) => `数据项 ${i+1}`),
            datasets: [{
                label: '统计数据',
                data: chartData,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

进阶优化：无刷新更新图表 #

如果不想每次筛选都刷新页面，可以用 AJAX 异步提交表单：

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch(this.action, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        // 更新图表数据
        barChart.data.datasets[0].data = data.chartData;
        barChart.update();
        // 更新表单回显
        document.getElementById('from').value = data.selectedFrom;
        document.getElementById('to').value = data.selectedTo;
    });
});

这时候后端需要返回 JSON 格式的数据，比如 Laravel 里改成：

return response()->json([
    'chartData' => $chartData,
    'selectedFrom' => $request->from,
    'selectedTo' => $request->to
]);

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