作者:背着单反看世界 | 来源:互联网 | 2023-08-10 13:59
作者原创:未经博主允许不许转载在上一篇的博客中,展示和分析了如何做一个饼状图,有疑问可以参考上一篇博客。现在分析和展示折线图的绘制和案例分析,先展示效果图:与饼状图不同的是,折线图
作者原创:未经博主允许不许转载
在上一篇的博客中,展示和分析了如何做一个饼状图,有疑问可以参考上一篇博客。
现在分析和展示折线图的绘制和案例分析,
先展示效果图:
与饼状图不同的是,折线图展现更多的数据,也会体现出更多的自动性。
先展示一下js代码:
此处需要注意的事项,都写在代码的注释里面,当将js数组类型的变量放入到data中时,折线图会自动解析数组中的元素个数,
并自动解析和展示。
js中接收到的数据,都是从java后台得到的数据,并将数据放入到jsp页面中,然后再js从jsp中获取值。
代码如下:
之所以放入到jsp页面中,是为了实现在js中方便快捷的获取到数据。
现在展示出java后台获取数据部分的代码
//直播点播流量增长折线图数据统计
UserResourceMonthStatistics mOnthStatistics= new UserResourceMonthStatistics();
monthStatistics.setUserId(userId);
//从数据库查询展示数据的集合
List mOnthList=monthStatisticService.getResMonthStatisticsList(monthStatistics);
//由于要展示3组数据,所以new了三个集合,并将需要的数据分别放入到对应的集合中,然后再setAttribute到jsp
List livFlowList = new ArrayList<>();
List vodFlowList = new ArrayList<>();
List 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);
在刚开始做的时候,一直在想如何直接从list集合中获取某一属性的集合值,在网上搜了很久,也没有搜到对应的方法,
于是写了循环,从而完成一个折线图的绘制。
绘制折线图,也可以用ajax的方式实现,其中主要的逻辑和数据处理都是放在客户端处理,思路和在服务端处理的思路是
一致的,用ajax请求到数据,一般该数据为一个集合,然后再js中循环该集合,并将需要的数据放入到数组中,然后将数组
提供给折线图插件。。。
java代码实现highchart与数据库数据结合完整案例分析(二)---折线图