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. [Angularjs]ng-include 包含

    写在前面 有时我们需要动态的创建一些标签,或者在收到服务端返回的json,创建一些标签然后找到页面上的元素,通过innerHTML写入到页面上面.angularjs也为我们提供了一种比较方便操作方式, ...

  2. CentOS 与 RedHat 关系和区别

    转自http://www.aixchina.net/club/archiver/tid-26784.html CentOS 发行版介绍 CentOS 是 Community ENTerprise Op ...

  3. Linux服务器管理: 系统管理:进程文件信息lsof

    lsof命令 列出进程打开或使用的文件信息 [root@loclahost/]#lsof [选项] 选项: -c 字符串: 只列出以字符串开头的进程打开的文件 -u 用户名: 只列出某个用户的进程打开 ...

  4. 分词工具ICTCLAS5.0使用心得

    接触自然语言处理有一年多了,最基本的一些自然是分词,词性标注,命名实体识别之类的知识,有些应用知道原理是一回事,自己动手做起来又是另外一回事了.最近又开始重操旧业:分词.分词最著名的自然就是中科院的分 ...

  5. Android 开发

    1.Activity 子类会重载一个 protected void onCreate(Bundle savedInstanceState) { ... } 方法,其中 savedInstanceSta ...

  6. 30秒搭建Github Page

    如果中国每个程序员都写博客,那么中国IT届的春天就来了 原文转自我的前端博客,链接:http://www.hacke2.cn/create-github-page/ 有同学问我的网站是怎么创建的,其实 ...

  7. JAVA之Socket编程

    网上对Socket的诠释很多,也很全,在这里我就不多说了,总之,现在的网络处处都在使用Socket.本帖是一个Socket的例子,用来模拟一个简单的登录系统,只有核心代码,访问数据库.输入神马的统统没 ...

  8. 只会CSS还不够，LESS、SASS、BootStrap、Foundation一网打尽！

    有些人想学CSS,不知如何下手:有些人已经学会CSS的各种属性,却不知如何运用:有些人会平面设计,不知道如何与网页设计结合:有些人会HTML,就是学不会CSS.试问自己,图中的技术你都会了吗? 别总是 ...

  9. 一张图告诉你，只会JavaScript还不够！

    会了JavaScript语法,你就真的会了JavaScript吗,来看这张图!是超实用的JavaScript代码段一书的导览!熊孩子们,赶紧学习去吧!

  10. 两个伪类下特有的属性 content

    更加具体的可以参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/content