基于Thingspeak数据的Highcharts动态文本Widget实现求助

核心思路 #

无需依赖Highcharts，直接通过前端JavaScript请求ThingSpeak API获取数据，根据数值范围匹配对应文本，实时更新页面上的文本容器即可。

具体实现步骤 #

• 步骤1：添加文本显示容器
  在HTML中创建用于展示状态文本的元素，可自定义样式：

  <div id="rain-status" style="padding: 12px; font-size: 20px; font-weight: 600; border: 1px solid #eee; border-radius: 4px; width: 240px;"></div>
  

• 步骤2：编写数据请求与文本匹配逻辑
  用原生JS实现完整的数据流处理：

  // 替换为你的ThingSpeak配置信息
  const CHANNEL_ID = '你的通道ID';
  const READ_API_KEY = '你的读取API密钥'; // 公开通道可省略
  const RAIN_FIELD = '1'; // 雨强对应的字段编号，比如field1
  
  // 根据雨强值返回对应状态文本
  function getRainStatus(intensity) {
    const value = parseFloat(intensity);
    if (isNaN(value)) return 'invalid data';
  
    if (value >= 0 && value <= 0.1) {
      return 'low rain';
    } else if (value >= 0.2 && value <= 1.0) {
      return 'medium rain';
    } else if (value > 1.0) {
      return 'heavy rain';
    } else if (value === 0) {
      return 'no rain';
    } else {
      return 'unknown';
    }
  }
  
  // 请求数据并更新页面文本
  async function refreshRainStatus() {
    try {
      let apiUrl = `https://api.thingspeak.com/channels/${CHANNEL_ID}/fields/${RAIN_FIELD}/last.json`;
      if (READ_API_KEY) apiUrl += `?api_key=${READ_API_KEY}`;
  
      const res = await fetch(apiUrl);
      const data = await res.json();
      const rainValue = data[`field${RAIN_FIELD}`];
      const statusText = getRainStatus(rainValue);
      document.getElementById('rain-status').textContent = statusText;
    } catch (err) {
      console.error('数据请求失败:', err);
      document.getElementById('rain-status').textContent = 'data error';
    }
  }
  
  // 初始化执行+定时刷新（ThingSpeak免费版限制15秒/次请求）
  refreshRainStatus();
  setInterval(refreshRainStatus, 15000);
  

注意事项 #

• 务必替换代码中CHANNEL_ID、READ_API_KEY、RAIN_FIELD为你自己的ThingSpeak通道参数。
• ThingSpeak免费版API请求频率限制为每15秒1次，定时间隔请勿小于15秒，避免触发限流。
• 可根据需求扩展数值范围规则，或修改文本容器的样式（如颜色、背景）来强化视觉反馈。

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