作者原創：未經博主允許不許轉載

在上一篇的博客中，展示和分析了如何做一個餅狀圖，有疑問可以參考上一篇博客。

現在分析和展示折線圖的繪制和案例分析，

先展示效果圖：

與餅狀圖不同的是，折線圖展現更多的數據，也會體現出更多的自動性。

先展示一下js代碼：

<!-- 播放類型統計折線圖 -->
<script type="text/javascript">
$(function () {
    var livFlowList=document.getElementById("livFlowList").value;
    var vodFlowList=$("#vodFlowList").val(); //
 
此處接收到的為一個string類型的變量
    var yVodFlow =[];   //此處的數組為折線圖裏面需要的數據數組
    var yLiveFlow = [];
    var xMonth=[]; //自動生成的x軸坐標軸的數據元素
    //去除兩邊的[],,,循環遍歷list集合中的元素，並將其解析為js數據類型，，，由於是將list集合接收來的數據，兩邊帶有【】號，需要將其刪除
    var test1 = livFlowList.substring(1,livFlowList.length-1);  //在使用substring方法時，必須有一個變量去接，否則不會返回響應的值
    var ss=test1.split(‘,‘);
    
 
for(var i=0; i<ss.length; i++){
        yLiveFlow.push(parseFloat(ss[i]));//將字符串數組中的元素解析為js數字格式類型，並放入到數組中
    }
    
    var test2=vodFlowList.substring(1,vodFlowList.length-1);
    var tt=test2.split(‘,‘);
    for(var h=0;h<tt.length; h++){
        yVodFlow.push(parseFloat(tt[h]));
    }
    var flowMonthList
 
=$("#flowMonthList").val();
    var monthList=flowMonthList.substring(1,flowMonthList.length-1);
    var gg=monthList.split(‘,‘);
    for(var k=0; k<gg.length; k++){
        xMonth.push(parseInt(gg[k]));
    }
    
     $(‘#line_playType‘).highcharts({
         title: {
            text: ‘流量統計‘,
            x: -20
        },
        credits: {
            text: ‘‘,
            href: ‘‘
        },
        xAxis: {
            categories:xMonth
        },
        yAxis: {
            title: {
                text: ‘流量(G)‘
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: ‘#808080‘
            }]
        },
        tooltip: {
            valueSuffix: ‘G‘
        },
        legend: {
            layout: ‘vertical‘,
            align: ‘right‘,
            verticalAlign: ‘middle‘,
            borderWidth: 0
        },
        series: [{
            name: ‘直播流量‘,
            data: yLiveFlow，
            color:Highcharts.getOptions().colors[3]
        }, 
        {
            name: ‘點播流量‘,
            data:yVodFlow，
            color:Highcharts.getOptions().colors[7]
        }
       ]
     });
});
</script>

此處需要註意的事項，都寫在代碼的註釋裏面，當將js數組類型的變量放入到data中時，折線圖會自動解析數組中的元素個數，

並自動解析和展示。

js中接收到的數據，都是從java後臺得到的數據，並將數據放入到jsp頁面中，然後再js從jsp中獲取值。

代碼如下：

<input type="hidden" name="vodFlowList" id="vodFlowList" value="${vodFlowList }"/>
                       <input type="hidden" name="livFlowList" id="livFlowList" value="${livFlowList }"/>
                       <input type="hidden" name="flowMonthList" id="flowMonthList" value="${flowMonthList }"/>
                        

之所以放入到jsp頁面中，是為了實現在js中方便快捷的獲取到數據。

現在展示出java後臺獲取數據部分的代碼

//直播點播流量增長折線圖數據統計
        UserResourceMonthStatistics monthStatistics= new UserResourceMonthStatistics();
        monthStatistics.setUserId(userId);
//從數據庫查詢展示數據的集合
        List<UserResourceMonthStatistics> monthList=monthStatisticService.getResMonthStatisticsList(monthStatistics);
//由於要展示3組數據，所以new了三個集合，並將需要的數據分別放入到對應的集合中，然後再setAttribute到jsp
        List<Double> livFlowList = new ArrayList<>();
        List<Double> vodFlowList = new ArrayList<>();
        List<String> flowMonthList = new ArrayList<>();
        for (UserResourceMonthStatistics userStatistics : monthList)
        {
            long liveFlow2 = percentString(userStatistics.getLiveFlow()); //點播流量
            double liveMonthFlow = chargeFlow(liveFlow2);
            long vodFlow2 = percentString(userStatistics.getVodFlow());
            double vodMonthFlow = chargeFlow(vodFlow2);
            String month= userStatistics.getMonth();
            flowMonthList.add(month);
            livFlowList.add(liveMonthFlow);
            vodFlowList.add(vodMonthFlow);
        }
        request.setAttribute("flowMonthList", flowMonthList);
        request.setAttribute("livFlowList", livFlowList);
        request.setAttribute("vodFlowList", vodFlowList);

在剛開始做的時候，一直在想如何直接從list集合中獲取某一屬性的集合值，在網上搜了很久，也沒有搜到對應的方法，

於是寫了循環，從而完成一個折線圖的繪制。

繪制折線圖，也可以用ajax的方式實現，其中主要的邏輯和數據處理都是放在客戶端處理，思路和在服務端處理的思路是

一致的，用ajax請求到數據，一般該數據為一個集合，然後再js中循環該集合，並將需要的數據放入到數組中，然後將數組

提供給折線圖插件。。。

java代碼實現highchart與數據庫數據結合完整案例分析（二）---折線圖