java代码实现highchart与数据库数据结合完整案例分析（二）---折线图

<!-- 播放类型统计折线图 -->
<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>

<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 }"/>
                        

//直播点播流量增长折线图数据统计
        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);