2015年12月1日 19:44:23

推荐这一篇用百度的ECharts图表工具

本文用到的js图表库: dygraphs

注:

测试数据量 19108个数据点, 最好将数据的量级调小, 这样渲染会很快, 例如这里使用的"内存消耗"数据, 原始数据是以Byte为单位

渲染时对"1235136"这样的大整数进行计算会很慢, 可以先将数值除以1000再进行渲染

先上效果图: 横坐标: 时间轴, 单位是毫秒; 纵坐标, 对应时间的内存使用量, 单位是KB

代码如下:

 <html>

 <head>

 <meta charset="UTF-8">

 <script type="text/javascript" src="./js/dygraph.js"></script>

 </head>

 <body>

 <?php

 $fp = fopen('./file/trace._test_index_ab_cpu_XDEBUG_TRACE=start_trace.xt2', 'r');

 $arrLineData = [];

 $arrDetailData = [];

 while(!feof($fp)){

     $row = fgets($fp);

     $row = trim($row);

     $arr_now = preg_split('#\s+#', $row);

     if (count($arr_now) > 2 && is_numeric($arr_now[0])) {

         $tmp = [];

         $tmp[] = $arr_now[0]*1000;

         $tmp[] = $arr_now[1]/1000;

         $arrLineData[] = $tmp;

         $tmp = [];

         $tmp['memory_add'] = $arr_now[2];

         $tmp['function'] = $arr_now[4];

         $tmp['location'] = $arr_now[5];

         $key = ($arr_now[0]*10000).'_'.$arr_now[1]; //去掉小数点, 方便javascript的object取值

         $arrDetailData[$key] = $tmp;

     }

 }

 $jsonLineData = json_encode($arrLineData);

 $jsonDetailData = json_encode($arrDetailData);

 fclose($fp);

 ?>

 <div id="graphdiv" style="width:1900px; height:600px;"></div>

 <div id="detail"></div>

 <script type="text/javascript">

 var detailData = <?= $jsonDetailData ?>;

 g = new Dygraph(

     document.getElementById("graphdiv"),

     <?= $jsonLineData ?>, // native Array

     {

         labels: [ "time", "内存" ], //每对数据的名称, 默认在右上角显示

         title:'PHP时间/内存效率分析', //图表的标题

         xlabel:'时间', //x轴名称

         ylabel:'内存占用', //y轴名称

         color:'green', //线条和点的颜色 支持#aaa, rgb(,,), green/blue/red...

         pointClickCallback:function(e, point){clickPoint(e, point)}, //不要用 clickCallback 双击缩小的时候会跟这个clickCallback有冲突, 但 clickCallback 点击的时候会默认获取最近的一个点

         hideOverlayOnMouseOut:false, //鼠标移出作图区后仍然显示坐标信息

         digitsAfterDecimal:4, //小数点后保真位数

         maxNumberWidth:9, //整数位数超过这个值就转为科学计数法显示 1e6

         labelsSeparateLines:true, //坐标信息换行显示

         strokePattern: Dygraph.DOTTED_LINE, //连线样式

         strokeWidth:0.3, //连线宽度, 全局默认宽度, 可自定义每条线/点的宽度

         drawPoints:true, //点也画出来

         pointSize:2, //点的大小

     }// options

   );

   function clickPoint(e, point)

   {

       // console.log(detailData);

       // console.log(point);

       var key = (point.xval*10)+'_'+((point.yval)*1000);

       // console.log(key);

       var obj = detailData[key];

       // console.log(obj);

       var str = '内存增量: '+obj.memory_add+"<br>";

       var str = str + '函数调用: '+obj.function+"<br>";

       var str = str + '所在行: '+obj.location;

       document.getElementById('detail').innerHTML = str;

   }

 </script>

 </body>

 </html>

dygraphs 的功能点

主要是快, 19000个点瞬间描绘

支持拖动放大(放大的行为可以自定义:鼠标拖动选中放大, 双击还原), 横向放大/纵向放大(水平拖动鼠标/垂直拖动鼠标)

支持两个纵坐标

支持坐标点以及连线的颜色,大小/尺寸, 样式(虚线, 实线, 点线)自定义或全局定义

支持坐标值格式化显示, 将原始的坐标值处理成你想要的显示格式, 例如将201512变为Dec 2015

支持很多回调

支持给数据点添加/修改标注 (也支持样式自定义, 添加图表, 事件响应...)

但我这里并没有使用标注功能, 因为, 这里的数据有一个特点就是, 统一个x坐标上有很多个点, 而标注是根据x坐标进行关联显示的(这一点跟jscharts的setTooltip()是一样的问题)

//options 键值对示例

hideOverlayOnMouseOut:false, //鼠标移出作图区后仍然显示坐标信息
digitsAfterDecimal:4, //小数点后保真位数
maxNumberWidth:9, //整数位数超过这个值就转为科学计数法显示 1e6

用dygraphs图表分析xdebug的trace结果的更多相关文章

  1. Controller - 压力机的设置 - 界面图表分析

    一. Controller- 压力机界面的一下设置讲解   2种测试场景的设计和压测策略 二. Controller- 压力机界面的图表分析

  2. ECharts分析xdebug跟踪日志

    2015年12月23日 15:36:11 星期三 之前用的是国外的图表工具, 有点麻烦, 文档是英文的, 看着不顺眼, 发现了百度出品的ECharts, 文档比较全, 功能比较多, 做出的图也比较好看 ...

  3. 使用ECharts实现数据图表分析

    一.ECharts介绍 实现对统计数据的图形分析之前用过JFreeChar,但它是用纯java实现编码繁琐且效果不佳,后来又使用过Fusioncharts 报表工具,它是基于Flash的图表组件.以X ...

  4. 【MySQL 原理分析】之 Trace 分析 order by 的索引原理

    一.背景 昨天早上,交流群有一位同学提出了一个问题.看下图: 我不是大佬,而且当时我自己的想法也只是猜测,所以并没有回复那位同学,只是接下来自己做了一个测试验证一下. 他只简单了说了一句话,就是同样的 ...

  5. Jmeter插件图表分析

    1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间间隔是1毫秒,在setting中可以设置时间间隔以及其他的参数,右击可以导出exc ...

  6. 一起来立Flag吧！超炫的数据图表分析 2020 年 Java 技术趋势

    引言 2020 来了,第一批 00 后已经 20 岁了,95 后也到了晚婚的年龄,员外的头发也越来越少了,新的一年大家有立下了哪些 Flag ?小伙伴们别急着立 Flag,让员外帮你分析一下哪些技术正 ...

  7. Jmeter 插件图表分析

    1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间间隔是1毫秒,在 setting 中可以设置时间间隔以及其他的参数,右击可以导出 ...

  8. PPT技术干货1(下)——数据图表分析、逻辑梳理、高效办公

    数据分析 让数据指导决策,帮你获得业绩增长 数据展示是PPT必备的基础技能, 有些人是简单粗暴的将数据直接堆在页面上: 这样的汇报缺乏重点,不具有针对性. 图表该如何设计呢? 1.数据可视化,内容交互 ...

  9. Form_通过Trace分析Concurrent和Form性能和异常详解（案例）

    2014-06-21 Created By BaoXinjian

随机推荐

  1. Yii2框架与MongoDB拓展、Redis拓展的安装流程

    @author 周煦辰 2016-03-21 这段时间新上了一个项目,使用的是Yii2框架.这里记录一下Yii2框架.Yii2-Mongo拓展.Yii2-Redis拓展等的安装流程.因为使用的系统是W ...

  2. va_list深究

    va_list深究 2011-04-21 21:06:11|  分类: C/C++|字号 订阅     VA函数(variable argument function),参数个数可变函数,又称可变参数 ...

  3. Makefile的学习笔记

    Makefile的学习笔记 标签: makefilewildcard扩展includeshellfile 2012-01-03 00:07 9586人阅读 评论(2) 收藏 举报  分类: Linux ...

  4. 关于精简安装office2010的步骤

    首先我们安装系统都会安装一个办公套件:office当然你也可以选择使用wps但我个人比较讨厌wps的广告 然而使用office完整安装不仅消耗资源大启动速度慢,而且一些功能我都用不到,所以我这几来一个 ...

  5. Linux关于添加硬盘的那些事儿：笔记

    添加新硬盘:http://note.youdao.com/share/?id=8cf27602cdce36e1d4160f00e9004b00&type=note 关于添加硬盘的那些事儿:   ...

  6. 优化 PHP 代码建议

    1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍.2.$row[’id’] 的速度是$row[id]的7倍.3.echo 比 print 快,并且使用echo的 ...

  7. AngularJS API之equal比较对象

    使用情况 1 首先,所有满足 a === 3 这种的对象,在angular.equals(a,b)中都会返回真 2 所有对象的类型,以及属性值都相同的,也会返回真 3 NaN和NaN也会返回真(在ja ...

  8. 论在Windows下远程连接Ubuntu

       Ubuntu下1:下载xrdp   sudo apt-get install xrdp 2: urs/share/applications 下找到  远程桌面 设置成这样 Windows下 1; ...

  9. Octal Fractions

    Octal Fractions Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 149  Solved: 98 Description Fractions ...

  10. Go - 内置函数大全

    Package builtin import "builtin" Overview Index Overview ▾ Package builtin provides docume ...