Highcharts 中文社区

查看: 36155|回复: 42

[PHP相关] Highcharts与Ajax结合实现实时刷新图表——PHP版

 关闭 [复制链接]
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    22650

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

    发表于 2013-11-4 21:38:16 | 显示全部楼层 |阅读模式
    Highcharts与Ajax结合实现实时刷新图表——PHP版
    一、环境及sql
    • 开发语言:php+Jquery
    • 数据库:mysql
    • 数据表结构:
    ajax-highcharts1.JPG

    • Sql语句:
      
    1. use test;

    2. CREATE TABLE `test` (
    3.   `id` int(11) NOT NULL AUTO_INCREMENT,
    4.   `datetime` char(10) NOT NULL,
    5.   `data` double DEFAULT NULL,
    6.   PRIMARY KEY (`id`)
    7. ) ENGINE=InnoDB AUTO_INCREMENT=31 DEFAULT CHARSET=latin1;

    8. insert into test (datetime,data) values
    9. ('2013-10-01',20.5),('2013-10-02',23.7),('2013-10-03',22.4),('2013-10-04',29.0),('2013-10-05',22.2),
    10. ('2013-10-06',22.6),('2013-10-07',26.9),('2013-10-08',28.0),('2013-10-09',24.1),('2013-10-10',27.1),
    11. ('2013-10-11',23.6),('2013-10-12',28.8),('2013-10-13',22.4),('2013-10-14',23.6),('2013-10-15',24.2),
    12. ('2013-10-16',22.6),('2013-10-17',26.2),('2013-10-18',28.2),('2013-10-19',21.7),('2013-10-20',25.2),
    13. ('2013-10-21',25.0),('2013-10-22',21.6),('2013-10-23',25.7),('2013-10-24',21.7),('2013-10-25',22.2),
    14. ('2013-10-26',25.6),('2013-10-27',26.2),('2013-10-28',26.0),('2013-10-29',23.2),('2013-10-30',22.4);
    复制代码


    二、基本思路及代码
    • 本思路
    ajax-highcharts2.JPG

    • 文件结构(后面下载可获取)
    ajax-highcharts3.JPG
    • 主要代码:
       1、test.html
    1. <!DOCTYPE HTML>
    2. <html>

    3. <head>
    4.     <title>Test</title>
    5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6.     <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    7.     <script type="text/javascript" src="js/highcharts.js"></script>
    8.     <script>
    9.     //图表属性,不包含数据
    10.     var options = {
    11.         chart: {
    12.             renderTo: 'container',
    13.             type: 'spline',
    14.         },
    15.         title: {
    16.             text: '实时温度曲线',
    17.             x: -20 //center
    18.         },

    19.         xAxis: {},
    20.         yAxis: {
    21.             title: {
    22.                 text: 'Temperature (°C)'
    23.             },
    24.             plotLines: [{
    25.                 value: 0,
    26.                 width: 1,
    27.                 color: '#808080'
    28.             }]
    29.         },
    30.         series: [{
    31.             name: '温度',
    32.         }],
    33.         tooltip: {
    34.             valueSuffix: '°C'
    35.         },

    36.         plotOptions: {
    37.             spline: {
    38.                 dataLabels: {
    39.                     enabled: true
    40.                 },
    41.                 animation: false,
    42.             },
    43.         },
    44.     };

    45.     //初始函数,设置定时器,定时取数据
    46.     $(function() {
    47.         queryData(0);

    48.         var i = 0;
    49.         var timer = setInterval(function() {
    50.             i++;
    51.             if (i >= 3) {
    52.                 i = 0;
    53.             }
    54.             queryData(i);
    55.         }, 3000);

    56.         //停止刷新
    57.         $("button").click(function() {
    58.             clearInterval(timer);
    59.         });
    60.     });

    61.     var categories = [];
    62.     var datas = [];

    63.     //Ajax 获取数据并解析创建Highcharts图表
    64.     function queryData(index) {
    65.         $.ajax({
    66.             url: 'getDatas.php?index=' + index,
    67.             type: 'get',
    68.             dataType: "json",
    69.             success: function(data) {

    70.                 $.each(data, function(i, n) {
    71.                     categories[i] = n[1];
    72.                     datas[i] = n[2] * 1;
    73.                 });

    74.                 options.xAxis.categories = categories;
    75.                 options.series[0].data = datas;

    76.                 chart = new Highcharts.Chart(options);
    77.             }
    78.         });
    79.     }
    80.     </script>
    81. </head>

    82. <body>
    83.     <div id="container" style="min-width:800px;height:400px;"></div>
    84.     <p align=center>
    85.         <button>停止刷新</button>
    86.     </p>
    87. </body>

    88. </html>
    复制代码
      2、getDatas.php
    1. <?php
    2.         $db_name = "test";
    3.         $db_host = "localhost";
    4.         $db_user = "root";
    5.         $db_pass = "root";
    6.                
    7.         $index = 0;
    8.         if(isset($_GET['index'])) {
    9.                 $index = (int)$_GET['index'];
    10.         }
    11.         
    12.         $link = mysql_connect($db_host,$db_user,$db_pass) or die("Can't connect DB");
    13.         $db = mysql_select_db($db_name);
    14.         mysql_query("set names utf8");
    15.         
    16.         $result =mysql_fetch_row(mysql_query("select count(*) from test"));
    17.         $pages = ((int)($result[0]))/10;
    18.         if($index > ($pages-1)) {
    19.                 $index = ($pages-1);
    20.         }
    21.         
    22.         $select = "select * from test limit ".($index*10).",10";
    23.         $result = mysql_query($select);
    24.         
    25.         $datas = array();
    26.         
    27.         while($row = mysql_fetch_row($result)) {
    28.                 $datas[] = $row;
    29.         }
    30.         
    31.         echo json_encode($datas);
    32. ?>
    复制代码


    三、资源下载




    本帖被以下淘专辑推荐:

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    无聊
    2014-8-18 19:58
  • 签到天数: 86 天

    [LV.6]常住居民II

    0

    主题

    6

    帖子

    1938

    积分

    HC 高手

    Rank: 4

    积分
    1938
    发表于 2014-4-3 10:44:27 | 显示全部楼层
    楼主 我也在用php写一个动态刷新的图 返回来的时间转换为时间戳后应该是正确的但是不知道为什么总是出现一个1970时间点 楼主能指导下么

    qq截图

    qq截图
  • TA的每日心情
    无聊
    2014-8-18 19:58
  • 签到天数: 86 天

    [LV.6]常住居民II

    0

    主题

    6

    帖子

    1938

    积分

    HC 高手

    Rank: 4

    积分
    1938
    发表于 2014-4-3 10:56:37 | 显示全部楼层
    SevenLX 发表于 2014-4-3 10:44
    楼主 我也在用php写一个动态刷新的图 返回来的时间转换为时间戳后应该是正确的但是不知道为什么总是出现一 ...

    我知道是哪的问题了 是坐标轴的问题 但是我的坐标轴为什么总是在1970开始呢
  • TA的每日心情
    无聊
    2014-8-18 19:58
  • 签到天数: 86 天

    [LV.6]常住居民II

    0

    主题

    6

    帖子

    1938

    积分

    HC 高手

    Rank: 4

    积分
    1938
    发表于 2014-4-3 11:10:28 | 显示全部楼层
    :lol:lol:lol楼主 我解决啦 还是数据问题我初始多循环了一次数据 多给我添加了一个点
  • TA的每日心情
    郁闷
    2014-4-21 08:33
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    3

    主题

    13

    帖子

    204

    积分

    HC 熟手

    Rank: 2

    积分
    204
    发表于 2014-4-10 15:58:41 | 显示全部楼层
    SevenLX 发表于 2014-4-3 11:10
    楼主 我解决啦 还是数据问题我初始多循环了一次数据 多给我添加了一个点 ...

    你好 可以把从PHP返回来的数据格式发给我看一下吗 谢谢
  • TA的每日心情
    郁闷
    2014-4-21 08:33
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    3

    主题

    13

    帖子

    204

    积分

    HC 熟手

    Rank: 2

    积分
    204
    发表于 2014-4-10 16:09:41 | 显示全部楼层
    你好 可以把从PHP返回来的数据格式发给我看一下吗 谢谢
  • TA的每日心情
    无聊
    2014-8-18 19:58
  • 签到天数: 86 天

    [LV.6]常住居民II

    0

    主题

    6

    帖子

    1938

    积分

    HC 高手

    Rank: 4

    积分
    1938
    发表于 2014-4-10 20:52:16 | 显示全部楼层
    wpj19910910 发表于 2014-4-10 15:58
    你好 可以把从PHP返回来的数据格式发给我看一下吗 谢谢

    [{"pnum":"101","pvalue":"0.21","time":1397120143},{"pnum":"207","pvalue":"0.92","time":1397120143},{"pnum":"209","pvalue":"0.23","time":1397120143},{"pnum":"301","pvalue":"0.55","time":1397120143}]
    就是这样的json格式
  • TA的每日心情
    郁闷
    2014-4-21 08:33
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    3

    主题

    13

    帖子

    204

    积分

    HC 熟手

    Rank: 2

    积分
    204
    发表于 2014-4-11 08:51:45 | 显示全部楼层
    SevenLX 发表于 2014-4-10 20:52
    [{"pnum":"101","pvalue":"0.21","time":1397120143},{"pnum":"207","pvalue":"0.92","time":1397120143} ...

    谢谢 十分感谢
  • TA的每日心情
    郁闷
    2014-4-21 08:33
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    3

    主题

    13

    帖子

    204

    积分

    HC 熟手

    Rank: 2

    积分
    204
    发表于 2014-4-11 10:10:38 | 显示全部楼层
    本帖最后由 wpj19910910 于 2014-4-11 10:12 编辑
    SevenLX 发表于 2014-4-10 20:52
    [{"pnum":"101","pvalue":"0.21","time":1397120143},{"pnum":"207","pvalue":"0.92","time":1397120143} ...

    你好 我这个数据返回来的值是undefind C:\Users\Administrator\Desktop\QQ截图20140411100733.png这是数据格式的问题吗
    QQ截图20140411100733.png
  • TA的每日心情
    郁闷
    2014-4-21 08:33
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    3

    主题

    13

    帖子

    204

    积分

    HC 熟手

    Rank: 2

    积分
    204
    发表于 2014-4-11 10:35:18 | 显示全部楼层
    问题找到了 $.each(data, function (i, n)方法中的n不能用n[i],要用n.time这样的格式
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

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