请求开发基于Highcharts的下拉框时间范围过滤器（含近1-3月选项）

完善后的HTML代码 #

<html>
<select id="selectorPeriod" name="selectorPeriod" required="required">
  <option value="">请选择时间范围</option>
  <option value="30">最近1个月</option>
  <option value="60">最近2个月</option>
  <option value="90">最近3个月</option>
</select>
<div id="container"></div>
</html>

完善后的JavaScript代码 #

// 初始化日期常量
const today = new Date();
const ago30Days = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
const ago60Days = new Date(Date.now() - 60 * 24 * 60 * 60 * 1000);
const ago90Days = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000);

// 示例原始数据（实际使用时替换为你的业务数据）
const rawData = [
  { date: new Date('2024-01-15'), value: 10 },
  { date: new Date('2024-02-20'), value: 20 },
  { date: new Date('2024-03-10'), value: 15 },
  { date: new Date('2024-04-05'), value: 25 },
  { date: new Date('2024-04-20'), value: 30 }
];

// 初始化Highcharts图表（type可改为bar实现条形图）
const chart = Highcharts.chart('container', {
  chart: { type: 'column' },
  title: { text: '时间范围过滤数据' },
  xAxis: { type: 'datetime' },
  series: [{ name: '数据', data: filterDataByRange(today, ago30Days) }]
});

// 按时间范围筛选数据的工具函数
function filterDataByRange(endDate, startDate) {
  return rawData.map(item => {
    const itemDate = new Date(item.date);
    return itemDate >= startDate && itemDate <= endDate ? [itemDate.getTime(), item.value] : null;
  }).filter(item => item !== null);
}

// 下拉框切换事件监听
document.getElementById('selectorPeriod').addEventListener('change', function() {
  let startDate, endDate;
  switch(this.value) {
    case '30':
      endDate = today;
      startDate = ago30Days;
      break;
    case '60':
      endDate = today;
      startDate = ago60Days; // 修正原代码的赋值颠倒错误
      break;
    case '90':
      endDate = today;
      startDate = ago90Days; // 新增90天选项处理逻辑
      break;
    default:
      chart.series[0].setData([]);
      return;
  }
  // 更新图表数据
  chart.series[0].setData(filterDataByRange(endDate, startDate));
});

关键修正与说明 #

1. 修复逻辑错误：原60天选项的startDate与endDate赋值颠倒，现已修正为正确的时间范围（今天往前推对应天数到今天）。
2. 新增时间选项：在HTML下拉框中添加「最近3个月」选项，对应value=90，同时在JS中补充该选项的时间范围处理逻辑。
3. 数据过滤与图表更新：新增filterDataByRange函数用于筛选符合时间范围的数据，下拉框切换时自动刷新Highcharts图表展示内容。
4. 适配业务数据：示例中的rawData为模拟数据，实际使用时需替换为包含日期字段的业务数据，确保筛选逻辑正常运行。

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