用dygraphs圖表分析xdebug的trace結果

時間 2019-11-20

標籤 dygraphs 圖表分析 xdebug trace 結果欄目 Java 简体版

原文原文鏈接

2015年12月1日 19:44:23javascript

推薦這一篇用百度的ECharts圖表工具php

本文用到的js圖表庫: dygraphshtml

注: java

測試數據量 19108個數據點, 最好將數據的量級調小, 這樣渲染會很快, 例如這裏使用的"內存消耗"數據, 原始數據是以Byte爲單位git

渲染時對"1235136"這樣的大整數進行計算會很慢, 能夠先將數值除以1000再進行渲染json

先上效果圖: 橫座標: 時間軸, 單位是毫秒; 縱座標, 對應時間的內存使用量, 單位是KBide

代碼以下: 函數

 1 <html>
 2 <head>
 3 <meta charset="UTF-8">
 4 <script type="text/javascript" src="./js/dygraph.js"></script>
 5 </head>
 6 <body>
 7 <?php
 8 $fp = fopen('./file/trace._test_index_ab_cpu_XDEBUG_TRACE=start_trace.xt2', 'r');
 9 
10 $arrLineData = [];
11 $arrDetailData = [];
12 while(!feof($fp)){
13     $row = fgets($fp);
14     $row = trim($row);
15     $arr_now = preg_split('#\s+#', $row);
16     
17     if (count($arr_now) > 2 && is_numeric($arr_now[0])) {
18         $tmp = [];
19         $tmp[] = $arr_now[0]*1000;
20         $tmp[] = $arr_now[1]/1000;
21         $arrLineData[] = $tmp;
22         
23         $tmp = [];
24         $tmp['memory_add'] = $arr_now[2];
25         $tmp['function'] = $arr_now[4];
26         $tmp['location'] = $arr_now[5];
27         $key = ($arr_now[0]*10000).'_'.$arr_now[1]; //去掉小數點, 方便javascript的object取值
28         $arrDetailData[$key] = $tmp;
29     }
30     
31 }
32 
33 $jsonLineData = json_encode($arrLineData);
34 $jsonDetailData = json_encode($arrDetailData);
35 fclose($fp);
36 ?>
37 <div id="graphdiv" style="width:1900px; height:600px;"></div>
38 <div id="detail"></div>
39 <script type="text/javascript">
40 var detailData = <?= $jsonDetailData ?>;
41 g = new Dygraph(
42     document.getElementById("graphdiv"),
43     <?= $jsonLineData ?>, // native Array
44     {
45         labels: [ "time", "內存" ], //每對數據的名稱, 默認在右上角顯示
46         title:'PHP時間/內存效率分析', //圖表的標題
47         xlabel:'時間', //x軸名稱
48         ylabel:'內存佔用', //y軸名稱
49         color:'green', //線條和點的顏色 支持#aaa, rgb(,,), green/blue/red...
50         pointClickCallback:function(e, point){clickPoint(e, point)}, //不要用 clickCallback 雙擊縮小的時候會跟這個clickCallback有衝突, 但 clickCallback 點擊的時候會默認獲取最近的一個點
51         hideOverlayOnMouseOut:false, //鼠標移出做圖區後仍然顯示座標信息
52         digitsAfterDecimal:4, //小數點後保真位數
53         maxNumberWidth:9, //整數位數超過這個值就轉爲科學計數法顯示 1e6
54         labelsSeparateLines:true, //座標信息換行顯示
55         strokePattern: Dygraph.DOTTED_LINE, //連線樣式
56         strokeWidth:0.3, //連線寬度, 全局默認寬度, 可自定義每條線/點的寬度
57         drawPoints:true, //點也畫出來
58         pointSize:2, //點的大小
59         
60     }// options
61   );
62   
63   function clickPoint(e, point)
64   {
65       // console.log(detailData);
66       // console.log(point);
67       var key = (point.xval*10)+'_'+((point.yval)*1000);
68       // console.log(key);
69       var obj = detailData[key];
70       // console.log(obj);
71       var str = '內存增量: '+obj.memory_add+"<br>";
72       var str = str + '函數調用: '+obj.function+"<br>";
73       var str = str + '所在行: '+obj.location;
74       
75       document.getElementById('detail').innerHTML = str;
76   }
77 </script>
78 </body>
79 </html>