作者原創：轉載請註明出處

在做項目的過程中，經常會用到統計數據，同時會用到highchart或echart進行數據展示，highchart是外國開發的數據統計圖插件，

echart是我們國家開發的數據統計插件，我比較喜歡highchart的統計插件，在這裏展示的也是highchart插件的應用。

應用highchart插件並不難，找到官方文檔，copy代碼，就能把圖標呈現出來，難的是如何將本地數據庫中的數據與其結合。因此，

在這裏主要分析將數據庫數據和插件結合的過程，我用的是java代碼實現的。下面是實現的比例圖：

先展示js代碼

<script type="text/javascript">
  $(function () {
      var livePercent
 
=document.getElementById("livePercent").value;
      var vodPercent=$("#vodPercent").val();
      var playCount=$("#playCount").val();
     // alert(typeof());
     // alert("vodPercent:"+vodPercent+"######livePercent="+livePercent);
      $(‘#pieChart_res‘).highcharts({
            chart: {
                plotBackgroundColor: 
 
null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ‘播放統計比例圖‘
            },
            credits: {
                text: ‘‘,
                href: ‘‘
            },
            tooltip: {
                headerFormat: 
 
‘{series.name}<br>‘,
                pointFormat: ‘{point.name}: <b>{point.percentage:.1f}%</b>‘
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: ‘pointer‘,
                    dataLabels: {
                        enabled: true,
                        format:‘{point.description}‘,
                        distance:-140
                    },
                    showInLegend:true
                }
            },
            series: [{
                
                type: ‘pie‘,
                name: ‘該資源訪問量占比‘,
                data: [
                        [‘直播訪問量占比‘,parseFloat(livePercent)],
                       {
                            name:‘點播訪問量占比‘,
                            y:parseFloat(vodPercent),
                             sliced: true,
                             selected: true,
                             description:‘總播放數‘+playCount
                       }
                ]
            }]
        });
    });
  </script> 

上面的代碼和highchart中API的代碼基本一致，主要的思想是：需要什麽數據，提供什麽數據。

所以我在後臺中已經將數據塞到jsp頁面中，並在js中解析出來，將數據提供給統計圖。

######特別要註意的是，從jsp獲取到的屬性值（int或long，或double，float），當我用js變量var來接收的時候，它統統變成了

string類型的變量，所以在供給數據的時候，一定要解析為js中的數字類型格式，此處用到的方法為：parseLong（），或parseFloa();

這裏調了很長時間，由於數據類型的不匹配，統計圖在調試的過程中，老是不顯示。要長記性。。。。。

此處為將後臺獲取到的數據放在頁面中的代碼展示（在頁面中均是隱藏顯示）：

<input type="hidden" name="liveTotalCount" id="livePercent" value="${liveCountPercent }">
                       <input type="hidden" name="vodTotalCount" id="vodPercent" value="${vodCountPercent }">

之所以將其放入頁面中，是為了方便接收數據。
最關鍵的地方來了，java代碼獲取統計圖所需數據：

//從數據庫查詢數據
UserPlaySummaryStatistics playStatistics=userPlayService.getUserPlayStatistics(playSummaryStatistics);
        
        String liveTotalCount= playStatistics.getLiveTotalCount();
        String vodTotalCount= playStatistics.getVodTotalCount();
        //將獲取到的數據類型轉化為long類型
        long liveCount=percentString(playStatistics.getLiveTotalCount());//A站總次數
        long vodCount=percentString(playStatistics.getVodTotalCount());//B站總次數
        
        //計算百分比，百分比為double類型，，，，，
        double livePercent = (double)liveCount/ (liveCount+vodCount);
        DecimalFormat format = new DecimalFormat("0.00%");
        String liveCountPercent = format.format(livePercent);
        System.out.println("liveCountPercent"+liveCountPercent);
        
        double vodPercent = (double)vodCount/ (liveCount+vodCount);
        DecimalFormat format1 = new DecimalFormat("0.00%");
        String vodCountPercent = format1.format(vodPercent);
        System.out.println("vodCountPercent"+vodCountPercent);


 request.setAttribute("playCount", playCount);
        request.setAttribute("liveCountPercent", liveCountPercent);
        request.setAttribute("vodCountPercent", vodCountPercent);
        

主要的代碼部分就是以上，這樣就可以輕而易舉的實現一個統計圖，而且加載的數據比較快。

也有用ajax實現數據請求的，過程和邏輯也比較復雜，後面我也會將我用ajax實現統計圖的代碼案例分享出來，已做筆記。

java代碼實現highchart與數據庫數據結合完整案例分析（一）---餅狀圖