用dygraphs图表分析xdebug的trace结果

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