如何将ThingSpeak数据接入Highcharts多线图表及相关问题咨询

1. 配置可运行的fetch请求URL #

ThingSpeak的API URL必须带对关键参数才能正常返回数据，正确格式如下：

const response = await fetch('https://api.thingspeak.com/channels/你的频道ID/feed.json?api_key=你的读取API密钥&results=100');

关键注意点：

• 把你的频道ID替换成你实际的ThingSpeak频道数字ID
• 你的读取API密钥要填频道的只读API密钥，私有频道必须加这个参数，公开频道也建议带上避免权限问题
• results=100是指定返回最近100条数据，可根据需求调整数字，比如改成200获取更多历史数据
• 若需指定时区，可追加&timezone=Asia/Shanghai这类参数，避免时间显示偏差
• 请求失败时，打开浏览器控制台查看错误：403代表API密钥或权限有误，404是频道ID错误，CORS错误可刷新页面重试（ThingSpeak默认支持跨域）

2. 同时展示两个柱状图+一条折线图 #

完全可以实现，Highcharts支持在同一张图表里混合多种系列类型。只需在series数组中给每个系列指定type属性：

• 两个系列设为column（柱状图）
• 一个系列设为line（折线图）

结合ThingSpeak数据的示例片段：

// 假设已通过fetch获取并解析到数据
const feeds = data.feeds;
// 提取三个字段的数据
const field1Data = feeds.map(item => parseFloat(item.field1));
const field2Data = feeds.map(item => parseFloat(item.field2));
const field3Data = feeds.map(item => parseFloat(item.field3));

Highcharts.chart('container', {
  title: { text: '混合图表展示' },
  xAxis: {
    categories: feeds.map(item => item.created_at) // 用ThingSpeak的时间作为X轴分类
  },
  series: [
    {
      name: '温度', // 对应ThingSpeak的field1
      type: 'column',
      data: field1Data
    },
    {
      name: '湿度', // 对应ThingSpeak的field2
      type: 'column',
      data: field2Data
    },
    {
      name: '气压', // 对应ThingSpeak的field3
      type: 'line',
      data: field3Data,
      marker: { enabled: true } // 显示折线标记点，可选配置
    }
  ]
});

如果需要区分双Y轴（比如柱状图是百分比、折线是数值），可给折线系列追加yAxis: 1，同时在图表配置中定义第二个Y轴即可。

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