如何将静态Google Charts JSON图表改造为实时动态双图表同页展示

1. 基础页面结构搭建 #

先引入Google Charts依赖，给两个图表预留渲染容器，示例代码：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <style>
    /* 自定义图表容器尺寸，可按需调整 */
    #line-chart { width: 100%; height: 400px; margin: 20px 0; }
    #gauge-chart { width: 100%; height: 300px; margin: 20px 0; }
  </style>
</head>
<body>
  <div id="line-chart"></div>
  <div id="gauge-chart"></div>
</body>
</html>

2. 封装独立的图表渲染函数 #

两个图表的渲染逻辑完全拆分，互不影响，各自调用对应的PHP接口拉取数据：

// 折线图渲染函数
async function drawLineChart() {
  try {
    // 替换为你的折线图数据PHP接口地址
    const res = await fetch('/api/line_chart_data.php', { cache: 'no-store' });
    const rawData = await res.json();
    const data = google.visualization.arrayToDataTable(rawData);
    
    // 这里复用你之前单图表测试时的option配置即可
    const options = {
      title: '折线图标题',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    const chart = new google.visualization.LineChart(document.getElementById('line-chart'));
    chart.draw(data, options);
  } catch (err) {
    console.error('折线图数据加载失败:', err);
  }
}

// 仪表盘渲染函数
async function drawGaugeChart() {
  try {
    // 替换为你的仪表盘数据PHP接口地址
    const res = await fetch('/api/gauge_data.php', { cache: 'no-store' });
    const rawData = await res.json();
    const data = google.visualization.arrayToDataTable(rawData);

    // 这里复用你之前单图表测试时的option配置即可
    const options = {
      width: 400, height: 300,
      redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90,
      minorTicks: 5
    };

    const chart = new google.visualization.Gauge(document.getElementById('gauge-chart'));
    chart.draw(data, options);
  } catch (err) {
    console.error('仪表盘数据加载失败:', err);
  }
}

3. 初始化与定时刷新逻辑 #

全局初始化时同时加载两个图表所需的依赖，首次渲染完成后启动定时刷新：

// 加载Google Charts所需的两个图表包，不要遗漏
google.charts.load('current', {'packages':['corechart', 'gauge']});
google.charts.setOnLoadCallback(initCharts);

function initCharts() {
  // 首次渲染两个图表
  drawLineChart();
  drawGaugeChart();

  // 定时刷新，单位为毫秒，以下示例为每3秒刷新一次
  // 如需两个图表刷新频率不同，可分别设置setInterval
  setInterval(() => {
    drawLineChart();
    drawGaugeChart();
  }, 3000);
}

注意事项 #

• 无需修改现有PHP接口的返回结构，保持和单图表测试时的JSON格式一致即可
• 两个渲染逻辑完全独立，单个接口请求失败不会影响另一个图表的正常展示
• 建议在PHP接口侧添加header('Cache-Control: no-cache, no-store, must-revalidate');响应头，避免浏览器缓存旧数据
• 如需调整刷新频率，直接修改setInterval的第二个参数即可，折线图、仪表盘也可单独设置不同的刷新间隔

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