设为首页收藏本站网络运维任务中心道具中心获得家元原创收益搜优惠券VIP会员
切换到宽版

数码之家

 找回密码
 立即注册
搜索
数码之家»社区 › 电子技术区 › 我爱单片机 › 求Arduino编程的8266 web绘制温度曲线的代码或者库 ...
返回列表 发新帖
查看: 1361|回复: 21

[Arduino] 求Arduino编程的8266 web绘制温度曲线的代码或者库

[复制链接]
发表于 2022-8-10 22:37:52 | 显示全部楼层
本帖最后由 fryefryefrye 于 2022-8-10 22:41 编辑

还是highchart效果好，还能随意放大，看任意一点数据。这是空调功率：


这是房间温度湿度

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
欢迎点赞/打赏/收藏，助力作者文章获得热度奖励，帖子“火”了来领赏（奖励1000~3000家元）
回复 支持 反对

使用道具 举报

发表于 2022-8-11 10:32:06 | 显示全部楼层
本帖最后由 fryefryefrye 于 2022-8-11 10:45 编辑
lemontreenm 发表于 2022-8-11 09:32
效果很好啊。不过arduino 8266能用吗？

理论上可以。
先把一个模板html放在8266的文件系统，开web服务。
浏览器访问后，会打开这个html模板。
然后html有脚本通过web地址访问数据，你在web服务里做一下，某个地址，返回所有的数据。
图就能画出来了。

  1. <html>
  2. <head>
  3.    <title>测试标题</title>
  4.    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  5.    <script src="http://code.highcharts.com/highcharts.js"></script>   
  6.    <script src="http://code.highcharts.com/modules/data.js"></script>
  7. </head>
  8. <body>
  9. <div id="container" style="width: 850px; height: 400px; margin: 0 auto"></div>
  10. <script language="JavaScript">
  11. $(document).ready(function() {
  12. var chart = {
  13.    //type: 'scatter',
  14.    zoomType: 'x'
  15. };
  16.    var title = {
  17.       text: '测试名称'   
  18.    };
  19.    var subtitle = {
  20.       text: 'Source: xxx'
  21.    };
  22.    var xAxis = {
  23.       tickInterval: 60 * 1000, // time interval of xAxis in ms
  24.       tickWidth: 0,
  25.       gridLineWidth: 1,
  26.       labels: {
  27.          align: 'left',
  28.          x: 3,
  29.          y: -3
  30.       }
  31.    };
  32. var yAxis = [{ // 左边 Y 轴
  33.       title: {
  34.          text: null
  35.       },
  36.       labels: {
  37.          align: 'left',
  38.          x: 3,
  39.          y: 16,
  40.          format: '{value:.,0f}'
  41.       },
  42.       showFirstLabel: false
  43.   },{ // 右边 Y 轴
  44.       linkedTo: 0,
  45.       gridLineWidth: 0,
  46.       opposite: true,
  47.       title: {
  48.          text: null
  49.       },
  50.       labels: {
  51.          align: 'right',
  52.          x: -3,
  53.          y: 16,
  54.          format: '{value:.,0f}'
  55.       },
  56.       showFirstLabel: false
  57.    }
  58. ];



  62.    var tooltip = {
  63.       shared: true,
  64.       crosshairs: true
  65.    }

  67.    var legend = {
  68.       align: 'left',
  69.       verticalAlign: 'top',
  70.       y: 20,
  71.       floating: true,
  72.       borderWidth: 0
  73.    };
  74.    

  76.    var json = {};

  78.    json.chart = chart;
  79.    json.title = title;
  80.    json.subtitle = subtitle;
  81.    json.xAxis = xAxis;
  82.    json.yAxis = yAxis;
  83.    json.tooltip = tooltip;
  84.    json.legend = legend;


  87.    $.get('dailychartdata', function (csv) {
  88.       var data = {
  89.          csv: csv
  90.       };
  91.       json.data = data;
  92.       $('#container').highcharts(json);
  93.    });   
  94. });
  95. </script>
  96. </body>
  97. </html>
复制代码
  1. 模板文件第87行的URL地址，请求数据的时候，按以下格式返回数据即可。

  3. 一根线数据格式示例:

  5. 2021-08-20 23:59:01,1
  6. 2021-08-21 23:59:00,2
  7. 2021-08-22 23:59:01,2
  8. 2021-08-23 23:59:00,1
  9. 2021-08-24 23:59:01,1
  10. 2021-08-25 23:59:00,1
复制代码


回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

APP|手机版|小黑屋|关于我们|联系我们|法律条款|技术知识分享平台

闽公网安备35020502000485号

闽ICP备2021002735号-2

GMT+8, 2025-5-24 09:09 , Processed in 0.093600 second(s), 9 queries , Redis On.

Powered by Discuz!

© 2006-2025 MyDigit.Net

快速回复 返回顶部 返回列表