新手求助：基于SQL数据实现Highcharts双Y轴双数据系列展示

嘿，恭喜你已经搞定了单传感器数据展示和多独立图表的布局！要实现双Y轴同时展示温湿度的Highcharts，其实可以分这几步来搞，我给你详细拆解下：

第一步：从MariaDB获取对齐的温湿度数据 #

首先得确保你从数据库拿到的是同一时间点的温度和湿度数据，这样在图表上才能完美对齐。假设你的传感器数据表叫sensor_data，有sensor_id（区分三个Pi3）、datetime、temperature、humidity这几个字段，那SQL查询可以这么写：

SELECT 
  datetime, 
  temperature, 
  humidity 
FROM sensor_data 
WHERE sensor_id = 'pi3_01' -- 替换成你要展示的传感器ID
ORDER BY datetime ASC;

如果你的datetime格式不是JS能直接解析的，还可以用SQL的DATE_FORMAT转成标准格式：

SELECT 
  DATE_FORMAT(datetime, '%Y-%m-%d %H:%i:%s') as datetime, 
  temperature, 
  humidity 
FROM sensor_data 
WHERE sensor_id = 'pi3_01'
ORDER BY datetime ASC;

第二步：前端数据格式转换 #

拿到后端返回的JSON数据后，需要把它转成Highcharts需要的数组格式——每个数据系列是[时间戳, 数值]的数组。举个JS处理的例子：

// 假设后端返回的data是包含所有记录的数组
const tempSeries = [];
const humiSeries = [];

data.forEach(record => {
  // 把字符串时间转成Highcharts需要的毫秒级时间戳
  const timestamp = new Date(record.datetime).getTime();
  // 确保数值是数字类型，避免图表显示异常
  tempSeries.push([timestamp, parseFloat(record.temperature)]);
  humiSeries.push([timestamp, parseFloat(record.humidity)]);
});

第三步：配置双Y轴的Highcharts #

这是核心步骤，重点是配置两个Y轴，然后给每个数据系列指定对应的轴。直接上完整的配置代码，你可以根据自己的需求调整样式：

// 假设你的图表容器是一个id为"temp-humi-chart"的div
Highcharts.chart('temp-humi-chart', {
  chart: {
    type: 'line', // 也可以换成area（面积图）、spline（平滑曲线）等
    height: 400 // 自定义图表高度
  },
  title: {
    text: 'Pi3 传感器 温湿度实时数据'
  },
  xAxis: {
    type: 'datetime',
    title: {
      text: '时间'
    },
    labels: {
      // 自定义时间显示格式，比如YYYY-MM-DD HH:MM
      format: '{value:%Y-%m-%d %H:%M}'
    }
  },
  yAxis: [
    // 第一个Y轴：温度，显示在左侧
    {
      title: {
        text: '温度 (°C)'
      },
      lineWidth: 1,
      labels: {
        format: '{value} °C'
      }
    },
    // 第二个Y轴：湿度，显示在右侧
    {
      title: {
        text: '湿度 (%)'
      },
      lineWidth: 1,
      opposite: true, // 关键：把轴放到右侧
      labels: {
        format: '{value} %'
      }
    }
  ],
  tooltip: {
    shared: true, // 鼠标悬停时同时显示两个系列的数据
    crosshairs: true, // 显示十字准线，方便对齐
    formatter: function() {
      // 自定义tooltip的显示内容
      const timeStr = Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x);
      return `<b>${timeStr}</b><br/>` +
             `${this.points[0].series.name}: ${this.points[0].y} °C<br/>` +
             `${this.points[1].series.name}: ${this.points[1].y} %`;
    }
  },
  legend: {
    align: 'center',
    verticalAlign: 'bottom',
    layout: 'horizontal'
  },
  series: [
    {
      name: '温度',
      data: tempSeries,
      yAxis: 0, // 指定对应第一个Y轴
      color: '#ff6347' // 自定义温度线的颜色
    },
    {
      name: '湿度',
      data: humiSeries,
      yAxis: 1, // 指定对应第二个Y轴
      color: '#4682b4' // 自定义湿度线的颜色
    }
  ]
});

第四步：扩展到三个传感器 #

如果要在同一页面展示三个传感器的双Y轴图表，只需要复制上面的代码，修改三个地方：

• 数据库查询的sensor_id（比如分别是pi3_01、pi3_02、pi3_03）
• 图表容器的ID（比如temp-humi-chart-1、temp-humi-chart-2、temp-humi-chart-3）
• 图表的标题（比如“Pi3 传感器1 温湿度数据”）

一些实用注意事项 #

• 如果你的数据量特别大（比如几年的历史数据），建议在SQL里做数据聚合，比如按小时取平均值，避免图表加载太慢：

SELECT 
  DATE_FORMAT(datetime, '%Y-%m-%d %H:00:00') as datetime,
  AVG(temperature) as temperature,
  AVG(humidity) as humidity
FROM sensor_data
WHERE sensor_id = 'pi3_01'
GROUP BY DATE_FORMAT(datetime, '%Y-%m-%d %H')
ORDER BY datetime ASC;

• 确保后端返回的JSON数据没有格式错误，比如不要有null值，如果有可以在SQL里用IFNULL(temperature, 0)替换，或者在JS里过滤掉无效数据。

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