JavaScript处理JSON温度数据转为数组供ChartJS可视化的问题咨询

1. 前置准备 #

• 将你的温度JSON文件命名为temp_data.json，放在Web服务的可公开访问目录下，确保通过服务地址（比如http://你的本地IP/temp_data.json）可以直接访问到文件内容
• 提前下载ChartJS的单文件js包到本地，和HTML文件放在同目录下，避免使用外部外链

2. 核心逻辑说明 #

2.1 动态加载JSON文件 #

使用浏览器原生的fetchAPI请求JSON文件，不需要额外引入第三方工具，示例代码逻辑：

// 加载JSON数据的函数
async function loadTempData() {
  const response = await fetch('./temp_data.json');
  const tempObj = await response.json();
  return tempObj;
}

2.2 解析数据生成温度、时间数组 #

拿到JSON对象后，通过遍历键值对提取对应数据，同时按时间排序避免对象键顺序混乱：

function parseTempData(rawObj) {
  // 把对象转成[键, 值]的数组
  const entryList = Object.entries(rawObj);
  // 按时间排序：提取键里的时间部分，转成分钟数比较
  entryList.sort((a, b) => {
    const timeA = a[0].replace('Temp_', '').split(':').map(Number);
    const timeB = b[0].replace('Temp_', '').split(':').map(Number);
    return (timeA[0] * 60 + timeA[1]) - (timeB[0] * 60 + timeB[1]);
  });
  // 分别提取时间标签和温度数值数组
  const timeLabels = entryList.map(item => item[0].replace('Temp_', ''));
  const tempValues = entryList.map(item => Number(item[1]));
  return { timeLabels, tempValues };
}

这个方法返回的tempValues就是你需要的[26,20,25...]格式的数字数组，timeLabels可以直接作为图表的X轴时间标签。 #

3. 完整可运行示例 #

将以下代码保存为temp_chart.html放在Web服务目录下即可访问：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>温度监控图表</title>
  <!-- 这里替换成你本地ChartJS文件的路径 -->
  <script src="./chart.umd.min.js"></script>
  <style>
    .chart-container {
      width: 80%;
      margin: 30px auto;
    }
  </style>
</head>
<body>
  <div class="chart-container">
    <canvas id="tempChart"></canvas>
  </div>

  <script>
    let tempChartInstance = null;

    // 加载JSON数据
    async function loadTempData() {
      const response = await fetch('./temp_data.json');
      return await response.json();
    }

    // 解析数据
    function parseTempData(rawObj) {
      const entryList = Object.entries(rawObj);
      // 按时间排序
      entryList.sort((a, b) => {
        const timeA = a[0].replace('Temp_', '').split(':').map(Number);
        const timeB = b[0].replace('Temp_', '').split(':').map(Number);
        return (timeA[0] * 60 + timeA[1]) - (timeB[0] * 60 + timeB[1]);
      });
      const timeLabels = entryList.map(item => item[0].replace('Temp_', ''));
      const tempValues = entryList.map(item => Number(item[1]));
      return { timeLabels, tempValues };
    }

    // 渲染/更新图表
    async function renderChart() {
      const rawData = await loadTempData();
      const { timeLabels, tempValues } = parseTempData(rawData);
      
      const ctx = document.getElementById('tempChart').getContext('2d');
      // 如果已有图表实例，更新数据即可
      if (tempChartInstance) {
        tempChartInstance.data.labels = timeLabels;
        tempChartInstance.data.datasets[0].data = tempValues;
        tempChartInstance.update();
        return;
      }
      // 首次渲染创建实例
      tempChartInstance = new Chart(ctx, {
        type: 'line',
        data: {
          labels: timeLabels,
          datasets: [{
            label: '温度(℃)',
            data: tempValues,
            borderColor: 'rgb(255, 99, 132)',
            backgroundColor: 'rgba(255, 99, 132, 0.1)',
            tension: 0.1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: false,
              title: {
                display: true,
                text: '温度(℃)'
              }
            },
            x: {
              title: {
                display: true,
                text: '时间'
              }
            }
          }
        }
      });
    }

    // 页面加载时首次渲染
    window.onload = () => {
      renderChart();
      // 每30秒自动刷新数据，可根据你的采集频率调整间隔时间（单位毫秒）
      setInterval(renderChart, 30000);
    };
  </script>
</body>
</html>

注意事项 #

• 必须通过本地Web服务访问HTML文件，直接双击打开HTML会因为浏览器跨域限制无法加载JSON文件
• 数据更新间隔可以自行修改setInterval的第二个参数，和你的JSON文件更新频率匹配即可
• 如果你的JSON文件结构后续有调整，只需要修改parseTempData函数里的字段提取逻辑即可

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