java代码实现highchart与数据库数据结合完整案例分析---饼状图
Posted 香吧香
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了java代码实现highchart与数据库数据结合完整案例分析---饼状图相关的知识,希望对你有一定的参考价值。
作者原创:转载请注明出处
在做项目的过程中,经常会用到统计数据,同时会用到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与数据库数据结合完整案例分析---饼状图的主要内容,如果未能解决你的问题,请参考以下文章
Python使用Flask框架,结合Highchart,搭配数据功能模块处理csv数据
Python使用Flask框架,结合Highchart,搭配数据功能模块,加载 HTML 表格数据