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. 使用proguard混淆java web项目代码

    1.首先下载proGuard.zip到本地: proguard4.5beta4.tar.zip解压开,2.新建文本文档,修改文件名为XXX.pro,然后复制下面内容到.pro -injars 'Y:\ ...

  2. Mysql存储过程查询结果赋值到变量的方法

    Mysql存储过程查询结果赋值到变量的方法   把查询结果赋值到变量,大部分情况下使用游标来完成,但是如果明确知道查询结果只有一行(例如统计记录的数量,某个字段求和等),其实可以使用set或into的 ...

  3. A simple Snippet in ST2

    Reference: http://web-design-weekly.com/2012/07/03/snippets-in-sublime-text-2/ A sample - cofirm (To ...

  4. CSS 使用推荐

      中文字体css编码转换 微软雅黑 \5FAE\8F6F\96C5\9ED1 或 Microsoft YaHei 黑体 \9ED1\4F53 新宋体 \65b0\5b8b\4f53 宋体 \5b8b ...

  5. 工具介绍 - NimbleText

    非常实用的工具, 即使不是程序员也有必要掌握这个简单的小工具. 这个工具有桌面版和在线版两个版本. 桌面版地址: http://nimbletext.com/ 在线版地址: http://nimble ...

  6. Access应用日志<一>

    今天在确认实习生不能帮忙搭建数据库后,自己根据业务需求尝试搭了一个小型access数据库. 主要目的:储存历史月度数据,避免每次从公司数据库下载数据的麻烦,节省数据拉取时间. 搭建了以acct id为 ...

  7. informatica通用命令方式启动workflow

    #传mapping参数时#调用执行workflow,-sv informatica服务,-d 域 -u 用户,-p 密码 -folder知识库下的workflow所在文件夹,-wait wf_test ...

  8. Java小程序--抓取emai

    一.实现思路 1.使用Java.net.URL对象,绑定网络上某一个网页的地址 2.通过java.net.URL对象的openConnection()方法获得一个HttpConnection对象 3. ...

  9. lua操作json，mysql，redis等

    ==========================example for lua json======================= local cjson = require("cj ...

  10. 关于百度地图api测距显示NaN的解决方案

    因为随着百度地图的api的升级,测距的函数以及语句都发生的一定变化. 在调用api测距的时候通常我们使用的是语句map.getDistance(marker1,marker2); 但为什么这么简单的测 ...