码迷,mamicode.com
首页 > 数据库 > 详细

java代码实现highchart与数据库数据结合完整案例分析(一)---饼状图

时间:2017-08-23 11:54:16      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:nts   chart   long   charts   head   enabled   cursor   cti   border   

作者原创:转载请注明出处

       在做项目的过程中,经常会用到统计数据,同时会用到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与数据库数据结合完整案例分析(一)---饼状图

标签:nts   chart   long   charts   head   enabled   cursor   cti   border   

原文地址:http://www.cnblogs.com/zjdxr-up/p/7417192.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!