修改基于单片机JSON数据的Highcharts HTML/JS代码需求

DevOps 小满

2026-8-5

修改后的代码及说明

以下是满足你三个需求的完整代码，关键修改点会在代码后逐一说明：

<script>
var chartT = new Highcharts.Chart({
  chart:{ renderTo : 'chart-temperature' },
  title: { text: 'BME280 Temperature' },
  series: [{
    showInLegend: false,
    data: []
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
    series: { color: '#059e8a' }
  },
  xAxis: {
    // 移除datetime类型，改为默认数值轴适配point字段
    title: { text: 'Point' }
  },
  yAxis: {
    title: { text: 'Temperature (Celsius)' }
    //title: { text: 'Temperature (Fahrenheit)' }
  },
  credits: { enabled: false }
});

// 页面加载时仅请求一次数据，替代原定时刷新逻辑
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 解析返回的JSON数组
    var rawData = JSON.parse(this.responseText);
    // 提取point和temp组成图表所需的二维数组格式
    var chartData = rawData.map(item => [item.point, item.temp]);
    // 一次性设置系列数据并渲染
    chartT.series[0].setData(chartData, true);
  }
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
</script>

核心修改点：

取消自动刷新：删除原代码中的setInterval定时请求逻辑，改为页面加载时仅发起一次数据请求，只有手动刷新页面才会更新数据。
x轴适配point字段：移除xAxis的type: 'datetime'配置，设置x轴标题为Point，让x轴直接使用JSON中的point数值作为刻度。
提取temp数据：通过JSON.parse解析完整的JSON响应，用map方法遍历每个数据对象，提取point（作为x值）和temp（作为y值）组成符合Highcharts要求的数据结构，最后用setData一次性渲染所有数据点。