效果圖：

html程式碼：

<div id="section1" >
    <div id="container" style="height: 400px"></div>
    <!--container畫圖的盒子 -->
    <table id="maxmin" class="table table-hover table-condensed " cellspacing="0" width="100%">
    <!--maxmin 統計數值的盒子 -->
    </table>
</div>
 

javascript程式碼：

$.ajax({
    url:"http://localhost:8088/demo2/page/tu04.json",
    type:"get",
    datatype:"json",
    success:function con04(data){
        var con04arr = new Array();
        var option = new Object();  
        option.chart = new Object();  
        option.series = new Array();
        var
 
 mmarr = new Array();   
        //新建陣列存放計算出的每組最大值最小值

// 繪圖
        for(i=0;i<data.data.length;i++){
            con04arr[i] = new Array();
            var disk = new Array();
            disk[i] = new String();
            var disknow = new Array();
            for(j=0;j<data.data[0].length;j++){
              con04arr[i][j] = parseFloat
 
(data.data[i][j]);
              option.series[i] = new Object();  
              option.series[i].data = con04arr[i];              
              option.series[i].name = data.title[i];
              var disknow = con04arr[i][data.data[i].length-1];  
              //當前值
              var sum = 0;
              sum = sum+parseInt(data.data[i][j]);
            }

             //計算每組data的最大值、最小值、平均值放進mmarr
              var average = ""+parseInt(sum*data.data.length/data.data[i].length)+"";
              var diskmax = ""+Math.max.apply(null, con04arr[i])+"";
              var diskmin = ""+Math.min.apply(null, con04arr[i])+"";
              mmarr[i] = [data.title[i],diskmax,diskmin,average,disknow];
        }

        option.chart.renderTo="container";   
        option.title={text:"磁碟使用率"};  
        option.legend={layout: 'vertical',align: 'right',verticalAlign: 'middle', borderWidth: 0};
        var chart = new Highcharts.Chart(option);  

//繪表 
        $("#maxmin").dataTable({
              aaData: mmarr,
              aoColumns:[
              {sTitle:"name",sType: "file-size"},
              {sTitle:"max",sType: "file-size"},
              {sTitle:"min",sType: "file-size"},
              {sTitle:"average",sType: "file-size"},
              {sTitle:"now",sType: "file-size"}
              ],
              Rows:[{
                Count:10
              }],
              ordering:false,
              bPaginate: false,
              bFilter: false,
              bAutoWidth: false,
              bInfo: false,
              bLengthChange : true, // 改變每頁顯示資料數量   
          }).fadeIn(); 


//為表中每個name新增顏色
        var color = ["#7CB5EC","#434348","#90ED7D","#F7A35C","#A0A3EE","#F15C80","#E4D354","#2B908F","#F45B5B","#91E8E1"];
        var tdarr= $("#maxmin tbody tr");
        for(i=0;i<tdarr.length;i++){
            $("#maxmin tbody tr").eq(i).find("td:first").css("color",color[i]);
            if(i>=10){
                j=i%10;
                color[i]=color[j];
            $("#maxmin tbody tr").eq(i).find("td:first").css("color",color[i]); 
            }
        }
    }
})

如果有什麼問題或建議，歡迎留言……^^