如何通过下拉列表传值至MongoDB匹配数据并绘制Highcharts饼图

我来帮你一步步捋清楚这个流程，核心就是把前端选中的年份传递到后端，再用MongoDB的$match做精准匹配，整个逻辑其实很清晰：

第一步：前端捕获选中的年份并发送请求 #

先完善你的Pug代码，添上年份下拉列表的结构，同时绑定事件来获取选中值并发起请求：

// 你的现有头部代码
title Alliance Dashboard
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')

// 添加年份下拉选择器
select#yearSelector
  option(value='2017') 2017
  option(value='2018') 2018
  option(value='2019') 2019
  // 按需添加更多年份选项

// Highcharts饼图容器
div#pieChartContainer(width='400', height='300')

// 引入Highcharts及自定义脚本
script(src='https://code.highcharts.com/highcharts.js')
script.
  // 初始化空饼图，后续通过请求填充数据
  const chart = Highcharts.chart('pieChartContainer', {
    title: { text: '年度数据统计' },
    series: [{
      type: 'pie',
      data: []
    }]
  });

  // 监听下拉列表的切换事件
  document.getElementById('yearSelector').addEventListener('change', async function() {
    const selectedYear = this.value;
    try {
      // 发送请求到后端接口，携带选中的年份
      const response = await fetch(`/api/fetchPieData?year=${selectedYear}`);
      const pieData = await response.json();
      // 更新饼图数据
      chart.series[0].setData(pieData);
    } catch (err) {
      console.error('获取数据失败:', err);
    }
  });

  // 页面加载完成后自动触发一次，加载默认年份数据
  document.getElementById('yearSelector').dispatchEvent(new Event('change'));

第二步：后端用MongoDB的$match匹配年份 #

假设你用的是Node.js + Express + Mongoose的技术栈，后端接口可以这么写：

const express = require('express');
const router = express.Router();
const DataModel = require('../models/yourDataModel'); // 替换成你的MongoDB模型

// 处理饼图数据请求的接口
router.get('/fetchPieData', async (req, res) => {
  try {
    // 获取前端传递的年份，注意类型匹配（数据库存数字就转数字，存字符串就保持原样）
    const targetYear = parseInt(req.query.year);
    // 用aggregate结合$match筛选对应年份的数据
    const result = await DataModel.aggregate([
      {
        $match: {
          year: targetYear // 这里的`year`要和你MongoDB集合里的年份字段名完全一致
        }
      },
      // 如果需要按类别统计（比如饼图的不同分类），可以加$group阶段
      {
        $group: {
          _id: '$category', // 替换成你要分组的字段（如产品类别、部门等）
          total: { $sum: '$amount' } // 替换成你要统计的数值字段（如销量、金额等）
        }
      },
      // 转成Highcharts需要的格式：[{name: '分类1', y: 100}, ...]
      {
        $project: {
          name: '$_id',
          y: '$total',
          _id: 0
        }
      }
    ]);
    res.json(result);
  } catch (err) {
    res.status(500).json({ error: '获取数据出错：' + err.message });
  }
});

module.exports = router;

关键注意事项 #

• 字段类型匹配：一定要确保MongoDB集合里的年份字段类型和前端传递的类型一致。比如数据库存的是数字2017，前端就要转成数字再传递；如果存的是字符串'2017'，就保持字符串匹配，不然$match会找不到数据。
• 简化查询逻辑：如果你的饼图不需要分组统计，只是展示对应年份的原始数据，那aggregate里只保留$match阶段即可，之后直接把数据整理成Highcharts需要的格式返回。
• 调试小技巧：后端可以先打印targetYear，确认前端传递的值已经正确接收；再单独在MongoDB客户端执行查询语句，验证是否能返回预期结果，排查问题会更高效。

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