如何将返回的乘客统计数据重定向至其他视图并在Chart.js中展示

嘿，我来帮你搞定这个需求！其实核心就是解决数据传递和新视图中Chart.js的渲染这两个关键点，下面分后端和前端两部分给你具体方案：

当用户点击「显示月度图表」或「显示日期维度图表」按钮时，你需要先生成对应的统计数据，再把数据传递到目标视图。这里有两种常用的可行方案：

方案1：后端存数据到Session，再重定向 #

如果你的后端是基于Session的框架（比如Spring Boot、Django），可以用这种方式：

• 前端点击按钮时，发起请求到后端的统计接口（比如/api/passengers/monthly-stats）
• 后端生成按月份统计的乘客总数JSON数据，把数据存入Session（避免直接在URL中暴露大量数据）
• 后端返回重定向响应，指向图表视图的URL（比如redirect:/charts/monthly）
• 图表视图的后端控制器从Session中取出数据，渲染到页面的JS变量里

示例伪代码（Spring Boot）：

@GetMapping("/api/passengers/monthly-stats")
public String getMonthlyStats(HttpSession session) {
    // 生成月度统计数据，转换成JSON格式
    String statsJson = objectMapper.writeValueAsString(generateMonthlyStats());
    session.setAttribute("monthlyStats", statsJson);
    return "redirect:/charts/monthly";
}

@GetMapping("/charts/monthly")
public String showMonthlyChart(Model model, HttpSession session) {
    String statsJson = (String) session.getAttribute("monthlyStats");
    model.addAttribute("monthlyStats", statsJson);
    session.removeAttribute("monthlyStats"); // 用完及时清除，避免重复使用
    return "monthly-chart"; // 返回图表视图模板
}

方案2：前端先获取JSON，再跳转并携带数据 #

如果不想依赖Session，也可以让前端主导数据传递：

• 按钮点击时，前端用fetch/AJAX请求后端统计接口，拿到JSON数据
• 把数据存入localStorage（适合数据量稍大的场景，比URL参数更安全），比如localStorage.setItem("monthlyStats", JSON.stringify(stats))
• 用window.location.href跳转到图表页面（比如/charts/monthly）
• 图表页面加载完成后，从localStorage取出数据，渲染图表

不管用哪种数据传递方式，最终图表页面都需要把数据注入到Chart.js中。这里给你一个通用的前端实现示例：

1. 先在图表视图的HTML中添加Canvas容器：

<div class="chart-container" style="width: 80%; margin: 0 auto;">
  <canvas id="monthlyPassengerChart"></canvas>
</div>

2. 引入Chart.js（可以用CDN或者本地文件）：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

3. 编写JS代码，取出数据并渲染图表：

// 两种数据获取方式二选一
// 方式1：从后端模板变量中获取（比如Thymeleaf模板语法）
const statsData = JSON.parse('[[${monthlyStats}]]');
// 方式2：从localStorage中获取
// const statsData = JSON.parse(localStorage.getItem("monthlyStats"));
// localStorage.removeItem("monthlyStats"); // 用完清除临时数据

// 整理Chart.js需要的格式：提取月份标签和乘客数数据
const labels = statsData.map(item => item.month); // 比如["1月", "2月", ..., "12月"]
const passengerCounts = statsData.map(item => item.totalPassengers);

// 初始化Chart图表
const ctx = document.getElementById('monthlyPassengerChart').getContext('2d');
new Chart(ctx, {
    type: 'bar', // 可根据需求换成line、pie等类型
    data: {
        labels: labels,
        datasets: [{
            label: '月度乘客总数',
            data: passengerCounts,
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: '乘客数量'
                }
            },
            x: {
                title: {
                    display: true,
                    text: '月份'
                }
            }
        }
    }
});

• 「显示日期维度图表」的实现逻辑完全一致，只需要替换统计数据的维度（按日期而非月份）和Chart的配置即可
• 如果数据量很大，推荐用方案1（后端Session传递），避免localStorage的存储限制
• 记得在跳转后清除临时存储的数据（Session或localStorage），防止残留数据导致渲染错误

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