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