测试报告的展示，通常需要通过饼图，柱状图，折线图等来分析对比、占比、走势等，我们可以采用Highcharts来生成漂亮又实用的图表,本文介绍如何将不同纬度的数据整合在一张图表中。
以App性能数据展示为例。前提，后端已经收集到测试数据，要求将不同维度的数据展示在同一个图表中，首先需要对数据进行归一化处理，具体归一化的方法不再此处详述；鼠标聚焦后展示详情，再反归一化，在详情中回归原始数据。
image
highcharts官网demo：https://www.hcharts.cn/demo/highcharts
处理如下:
1.依赖文件
<script src="Highcharts-5.0.12/code/highcharts.js"></script>
<script src="Highcharts-5.0.12/code/highcharts-more.js"></script>
2. 自定义图表颜色
图表样式设置，logo显示与隐藏设置属性credits：{enabled:true/false}；
角标显示与隐藏设置属性 exporting:{enabled:true/false}
自定义颜色属性colors ，多纬度数据用不同颜色展示，可以采用数组
Highcharts.setOptions({colors:['#049af0','#fedd32','#94cb61','#f9b368','#ff743c','#02df82','#64E572','#FFF263']});
3.填充自定义数据
*series属性设置，json格式表示不同纬度的数据
series: [
{
name: 'CPU数据'，
data:cpuDatas
},｛
name：xx，
data:xx,
}, {
}
]*
4.自定义浮动框展示详情
数据节点的详情可以在tooltip的formatter方法中扩充，例如以表格的形式，再通过this.point[x]取出当前鼠标所至节点的不同值，示例如下：
tooltip: {*
crosshairs:true,
shared:true,
formatter:function() {
var s ='性能详情'+'';
s+='
时间:'+tmpTime+' '+this.x+'';
s +='
-------------------';
s+='
CPU:'+ parseFloat(dealData(this.point[0].y)).toFixed(2)+'%';
s+='
内存:'+ parseFloat(dealData(this.point[1].y)).toFixed(2)+'M';
s+='
流量:'+ parseFloat(dealData(this.point[2].y)).toFixed(3)+'KB';
s+='
掉帧率:'+ parseFloat(dealData(this.point[3].y)).toFixed(2)+'%';
returns;
*}
其中，this.point[x]取出的值是已经处理过的（如归一化处理），保证原数据不失真，自定义dealData方法，对数据进行反归一化处理操作
6.自定义节点的形状和大小
为了更好的区分不同的类型的数据，可以添加属性marker设置节点的形状和大小，如下：
series: [
{
name:'CPU',
marker: {
symbol:'square' //每个数据节点设置为小正方形
},
data:formatCpu
}, {
name:'内存',
marker: {
symbol:'circle' //每个数据节点设置为小圆圈
},
data:formatMem
}]
symbol有'diamond','circle','square','triangle','triangle-down'，缺失为circle。
节点的大小设定如下
plotOptions: {
spline: {
marker: {
enable:true,
radius: 1, //自定义节点的半径为1px
lineColor:'#666666',
*lineWidth: 0.5 *
*symbol:'diamond'
}
}
如果设置为通用大小，可以在plotOptions的marker中设定，如果数据类别比较多，需要区别，在series属性中设定。
按照以上步骤处理数据，就可以在一张表中展示多个维度的数据，在测试报告撰写中比较实用。
网友评论