??????測試報(bào)告的展示，通常需要通過餅圖，柱狀圖，折線圖等來分析對比、占比、走勢等，我們可以采用Highcharts來生成漂亮又實(shí)用的圖表,本文介紹如何將不同緯度的數(shù)據(jù)整合在一張圖表中。

??????以App性能數(shù)據(jù)展示為例。前提，后端已經(jīng)收集到測試數(shù)據(jù)，要求將不同維度的數(shù)據(jù)展示在同一個(gè)圖表中，首先需要對數(shù)據(jù)進(jìn)行歸一化處理，具體歸一化的方法不再此處詳述；鼠標(biāo)聚焦后展示詳情，再反歸一化，在詳情中回歸原始數(shù)據(jù)。

image

highcharts官網(wǎng)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. 自定義圖表顏色
??????圖表樣式設(shè)置，logo顯示與隱藏設(shè)置屬性credits：{enabled:true/false}；
角標(biāo)顯示與隱藏設(shè)置屬性 exporting:{enabled:true/false}
??????自定義顏色屬性colors ，多緯度數(shù)據(jù)用不同顏色展示，可以采用數(shù)組

Highcharts.setOptions({colors:['#049af0','#fedd32','#94cb61','#f9b368','#ff743c','#02df82','#64E572','#FFF263']});

3.填充自定義數(shù)據(jù)
??????*series屬性設(shè)置，json格式表示不同緯度的數(shù)據(jù)

series: [
        {
            name: 'CPU數(shù)據(jù)'，
            data:cpuDatas
        },｛
           name：xx，
          data:xx,
        }, {
            }
    ]*

4.自定義浮動(dòng)框展示詳情
??????數(shù)據(jù)節(jié)點(diǎn)的詳情可以在tooltip的formatter方法中擴(kuò)充，例如以表格的形式，再通過this.point[x]取出當(dāng)前鼠標(biāo)所至節(jié)點(diǎn)的不同值，示例如下：

tooltip: {*
crosshairs:true,
shared:true,
formatter:function() {
var s ='性能詳情'+'';
s+='
時(shí)間:'+tmpTime+' '+this.x+'';
s +='
-------------------';
s+='
CPU:'+ parseFloat(dealData(this.point[0].y)).toFixed(2)+'%';
s+='
內(nèi)存:'+ 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]取出的值是已經(jīng)處理過的（如歸一化處理），保證原數(shù)據(jù)不失真，自定義dealData方法，對數(shù)據(jù)進(jìn)行反歸一化處理操作
6.自定義節(jié)點(diǎn)的形狀和大小
??????為了更好的區(qū)分不同的類型的數(shù)據(jù)，可以添加屬性marker設(shè)置節(jié)點(diǎn)的形狀和大小，如下：

series: [
{
name:'CPU',
marker: {
symbol:'square' //每個(gè)數(shù)據(jù)節(jié)點(diǎn)設(shè)置為小正方形
},
data:formatCpu
}, {
name:'內(nèi)存',
marker: {
symbol:'circle' //每個(gè)數(shù)據(jù)節(jié)點(diǎn)設(shè)置為小圓圈
},
data:formatMem
}]

symbol有'diamond','circle','square','triangle','triangle-down'，缺失為circle。
節(jié)點(diǎn)的大小設(shè)定如下
plotOptions: {
spline: {
marker: {
enable:true,
radius: 1, //自定義節(jié)點(diǎn)的半徑為1px
lineColor:'#666666',
*lineWidth: 0.5 *
*symbol:'diamond'
}
}
如果設(shè)置為通用大小，可以在plotOptions的marker中設(shè)定，如果數(shù)據(jù)類別比較多，需要區(qū)別，在series屬性中設(shè)定。
按照以上步驟處理數(shù)據(jù)，就可以在一張表中展示多個(gè)維度的數(shù)據(jù)，在測試報(bào)告撰寫中比較實(shí)用。