作者原创:未经博主允许不许转载

在上一篇的博客中,展示和分析了如何做一个饼状图,有疑问可以参考上一篇博客。

现在分析和展示折线图的绘制和案例分析,

先展示效果图:

与饼状图不同的是,折线图展现更多的数据,也会体现出更多的自动性。

先展示一下js代码:

<!-- 播放类型统计折线图 -->
<script type="text/javascript">
$(function () {
var livFlowList=document.getElementById("livFlowList").value;
var vodFlowList=$("#vodFlowList").val(); //此处接收到的为一个string类型的变量
var yVodFlow =[]; //此处的数组为折线图里面需要的数据数组
var yLiveFlow = [];
var xMonth=[]; //自动生成的x轴坐标轴的数据元素
//去除两边的[],,,循环遍历list集合中的元素,并将其解析为js数据类型,,,由于是将list集合接收来的数据,两边带有【】号,需要将其删除
var test1 = livFlowList.substring(1,livFlowList.length-1); //在使用substring方法时,必须有一个变量去接,否则不会返回响应的值
var ss=test1.split(',');
for(var i=0; i<ss.length; i++){
yLiveFlow.push(parseFloat(ss[i]));//将字符串数组中的元素解析为js数字格式类型,并放入到数组中
} var test2=vodFlowList.substring(1,vodFlowList.length-1);
var tt=test2.split(',');
for(var h=0;h<tt.length; h++){
yVodFlow.push(parseFloat(tt[h]));
}
var flowMonthList=$("#flowMonthList").val();
var monthList=flowMonthList.substring(1,flowMonthList.length-1);
var gg=monthList.split(',');
for(var k=0; k<gg.length; k++){
xMonth.push(parseInt(gg[k]));
} $('#line_playType').highcharts({
title: {
text: '流量统计',
x: -20
},
credits: {
text: '',
href: ''
},
xAxis: {
categories:xMonth
},
yAxis: {
title: {
text: '流量(G)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'G'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '直播流量',
data: yLiveFlow,
color:Highcharts.getOptions().colors[3]
},
{
name: '点播流量',
data:yVodFlow,
color:Highcharts.getOptions().colors[7]
}
]
});
});
</script>

此处需要注意的事项,都写在代码的注释里面,当将js数组类型的变量放入到data中时,折线图会自动解析数组中的元素个数,

并自动解析和展示。

js中接收到的数据,都是从java后台得到的数据,并将数据放入到jsp页面中,然后再js从jsp中获取值。

代码如下:

<input type="hidden" name="vodFlowList" id="vodFlowList" value="${vodFlowList }"/>
<input type="hidden" name="livFlowList" id="livFlowList" value="${livFlowList }"/>
<input type="hidden" name="flowMonthList" id="flowMonthList" value="${flowMonthList }"/>

之所以放入到jsp页面中,是为了实现在js中方便快捷的获取到数据。

现在展示出java后台获取数据部分的代码

//直播点播流量增长折线图数据统计
UserResourceMonthStatistics monthStatistics= new UserResourceMonthStatistics();
monthStatistics.setUserId(userId);
//从数据库查询展示数据的集合
List<UserResourceMonthStatistics> monthList=monthStatisticService.getResMonthStatisticsList(monthStatistics);
//由于要展示3组数据,所以new了三个集合,并将需要的数据分别放入到对应的集合中,然后再setAttribute到jsp
List<Double> livFlowList = new ArrayList<>();
List<Double> vodFlowList = new ArrayList<>();
List<String> 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与数据库数据结合完整案例分析(二)---折线图的更多相关文章

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

    作者原创:转载请注明出处 在做项目的过程中,经常会用到统计数据,同时会用到highchart或echart进行数据展示,highchart是外国开发的数据统计图插件, echart是我们国家开发的数据 ...

  2. ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图

    作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...

  3. jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行?

    jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行? 因为在解析时最新解析的就是JA ...

  4. 阿里云资深DBA专家罗龙九:云数据库十大经典案例分析【转载】

    阿里云资深DBA专家罗龙九:云数据库十大经典案例分析 2016-07-21 06:33 本文已获阿里云授权发布,转载具体要求见文末 摘要:本文根据阿里云资深DBA专家罗龙九在首届阿里巴巴在线峰会的&l ...

  5. MongoDB最简单的入门教程之三 使用Java代码往MongoDB里插入数据

    前两篇教程我们介绍了如何搭建MongoDB的本地环境: MongoDB最简单的入门教程之一 环境搭建 以及如何用nodejs读取MongoDB里的记录: MongoDB最简单的入门教程之二 使用nod ...

  6. java代码定时备份mysql数据库及注意事项——基于 springboot

    源码地址: https://gitee.com/kevin9401/BackUpDataBase git 拉取: https://gitee.com/kevin9401/BackUpDataBase. ...

  7. 《深入理解Java虚拟机》-----第5章 jvm调优案例分析与实战

    案例分析 高性能硬件上的程序部署策略 例 如 ,一个15万PV/天左右的在线文档类型网站最近更换了硬件系统,新的硬件为4个CPU.16GB物理内存,操作系统为64位CentOS 5.4 , Resin ...

  8. 可视化数据matplotlib之安装与简单折线图

    matplotlib是一个可视化数据的模块,安装前需要先安装Visual Studio Community:然后去https://pypi.python.org/pypi上查找matplotlib并下 ...

  9. 诊断Java代码中常见的数据库性能热点问题应该这么做!

    “你的Java应用程序的性能是怎样诊断和优化的?不妨看看这两位西医的方子.如果你有更好疗效的药方,也欢迎在评论区告诉我们. 当我在帮助一些开发者或架构师分析及优化Java应用程序的性能时,关键往往不在 ...

随机推荐

  1. 怎样在wordpress后台显示日志 ID

    有时我们需要在wordpress后台编辑特定的文章,找了大半天眼睛都花了,不禁会吐槽一下.有没有什么办法可以直接在日志列表查看日志 ID 呢?我们可以通过下面的代码实现: <?php /* Pl ...

  2. SQLite-创建、附加、分离数据库

    创建数据库 - $> sqlite3 DatabaseName.db 附加数据库 - sqlite> ATTACH DATABASE 'DatabaseName.db' AS 'Alias ...

  3. 简单mysql常用命令

    在命令行 输入 mysql -uroot -p123456 (-u账号 -p密码)登入mysql服务器 1.设置mysql密码set password for 'root'@'localhost' = ...

  4. 深入理解python之二——python列表和元组

    从一开始学习python的时候,很多人就听到的是元组和列表差不多,区别就是元组不可以改变,列表可以改变. 从数据结构来说,这两者都应当属于数组,元组属于静态的数组,而列表属于动态数组.稍后再内存的分配 ...

  5. EF5.0区别于EF4.0的增删改写法

    // 实现对数据库的添加功能,添加实现EF框架的引用 public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T& ...

  6. css3 弹性盒模型 变化

    如果你使用google搜索Flexbox,你会发现很多过时的信息.这里将告诉你如何迅速的辨别你需要的信息. 如果你正在查找有关于Flexbox的博客资料,你看到了“display:box;”或者“bo ...

  7. Python: 类中为什么要定义__init__()方法

    学习并转自:https://blog.csdn.net/geerniya/article/details/77487941 1. 不用init()方法定义类 定义一个矩形的类,目的是求周长和面积. c ...

  8. mysql数据安装问题汇总

    1.mysql安装冲突:conflicts with file from package 看到“conflicts”,是产生冲突了,文件“/usr/share/mysql/charsets/*”需要M ...

  9. Java SE 基础知识(String,Array)

    String 类: 1. 对于String对象的相等性判断来说,请使用equals()方法,而不是==.String的equals()是判断当前字符串与传进来的字符串的内容是否一致. 2. Strin ...

  10. 自己封装的ajax

    /** * ITCAST WEB * Created by lsy on 2016/5/24. */ /* * 1. 请求的类型 type get post * 2. 请求地址 url * 3. 是异 ...