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实现统计图的代码案例分享出来，已做笔记。