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. Redis3.0.7 cluster/集群 安装配置教程

    1.前言 环境:CentOS-6.7-i386-LiveDVD 安装的CentOs系统 节点: 6个节点,3个主节点.3个从节点(由于redis默认需要3个主节点,如果想每个主节点有一个从节点,这是最 ...

  2. 要让div中的float不会自动显示到下一行来?

    使用 高度 + hidden: 要尝试 恰当的 高度, 设置合适的 div的 height: ... 要让 float的 "最直接的" "亲生的 " " ...

  3. NERD_commenter——VIM批量注释与反注释插件

    转自:http://www.xefan.com/archives/83568.html 这是对程序员非常实用的一款插件,支持多种语言的补全,还支持单行注释,批量注释,等各种命令映射. 使用方法,先下载 ...

  4. R语言画图实例-参考R语言实战

    dose <- c(, , , ,) drugA <- c(, , , , ) drugB <- c(, , , , ) # 数据准备 opar <- par(no.reado ...

  5. 理解button标签的默认行为

    button标签的作用和它的名字一样,在绝大多数场合当做按钮来使用. 很多人在使用button按钮的时候出现过这样或者那样的问题,比如:自动提交表单.一次提交表单多次submit行为,有的浏览器下点击 ...

  6. 响应性web设计实战总结(二)

    响应性web设计实战总结(二) 阅读目录 背景知识: Gulp-less安装及配置如下 对响应性web总结,之前总结过2篇文章:可以看如下: http://www.cnblogs.com/tugenh ...

  7. Notepad++的插件

    1.4. Notepad++中常用的插件 1.4.1. 插件管理器: Plugin Manager 插件功能:此插件可以帮你管理插件,包括查看当前已经安装的插件有哪些,以及自动帮你下载相应的插件. 插 ...

  8. VBA 每日文件按日期打包存放

    每天省出1小时,换个好心情 1.判断是否存在tempfolder (过渡文件夹) 2.不存在 则在目标目录下新建文件夹tempfolder 在网上看到一种更简单的方法 if dir("e:\ ...

  9. POJ 1845 Sumdiv

    快速幂+等比数列求和.... Sumdiv Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 12599 Accepted: 305 ...

  10. SpringMVC 表单标签

    引入标签库 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" ...