如何在PHP中展示自定义日期区间内的Google Charts图表

1. 完善日期选择表单 #

先确保底部的日期筛选表单结构完整，包含起始日期、结束日期输入框和触发筛选的按钮：

<div id="date-filter-area">
  <input type="date" id="start-date" required>
  <input type="date" id="end-date" required>
  <button onclick="filterChartData()">筛选数据</button>
</div>

2. 编写筛选逻辑 #

根据数据量大小，分两种方案实现：

方案一：前端本地过滤（适合小数据量） #

如果页面初始化时已加载全部数据，直接在前端按日期区间过滤：

// 假设rawData是页面加载时获取的全量数据，格式为[['日期', '指标1', '指标2'], ...]
function filterChartData() {
  const start = new Date(document.getElementById('start-date').value);
  const end = new Date(document.getElementById('end-date').value);

  // 过滤出日期在区间内的数据行
  const filtered = rawData.filter(row => {
    const rowDate = new Date(row[0]);
    return rowDate >= start && rowDate <= end;
  });

  // 更新Google Charts
  const dataTable = google.visualization.arrayToDataTable(filtered);
  const chart = new google.visualization.ColumnChart(document.getElementById('chart-container')); // 替换为你的图表容器ID
  chart.draw(dataTable, yourChartConfig); // yourChartConfig是原有的图表配置项
}

方案二：后端接口查询（适合大数据量） #

数据量较大时，通过后端从数据库查询指定区间的数据更高效：

function filterChartData() {
  const start = document.getElementById('start-date').value;
  const end = document.getElementById('end-date').value;

  // 发送请求到后端接口
  fetch(`/api/query-data?start=${start}&end=${end}`)
    .then(res => res.json())
    .then(filteredData => {
      // 渲染更新后的图表
      const dataTable = google.visualization.arrayToDataTable(filteredData);
      const chart = new google.visualization.ColumnChart(document.getElementById('chart-container'));
      chart.draw(dataTable, yourChartConfig);
    })
    .catch(err => console.log('筛选失败:', err));
}

后端示例（PHP）：

<?php
// 数据库连接
$db = new mysqli('localhost', '用户名', '密码', '数据库名');

$startDate = $_GET['start'];
$endDate = $_GET['end'];

// 查询区间内的数据，假设表名为data_records，日期字段为record_date
$stmt = $db->prepare("SELECT record_date, metric1, metric2 FROM data_records WHERE record_date BETWEEN ? AND ?");
$stmt->bind_param("ss", $startDate, $endDate);
$stmt->execute();
$result = $stmt->get_result();

// 组装成Google Charts所需格式
$chartData = [['日期', '指标1', '指标2']];
while ($row = $result->fetch_assoc()) {
  $chartData[] = [$row['record_date'], (float)$row['metric1'], (float)$row['metric2']];
}

echo json_encode($chartData);
$stmt->close();
$db->close();
?>

3. 关键注意事项 #

• 确保Google Charts加载完成后再执行筛选逻辑，可将筛选函数放在google.charts.setOnLoadCallback()回调内。
• 统一日期格式：前端输入的YYYY-MM-DD格式需与数据库日期字段格式一致，避免转换错误。

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