在13年写了两篇帖子“SSH+Highcharts 异步加载图表”,到现在有很多人在QQ加我问我取值,加载数据的问题,然后我翻了翻之前的博客,发现确实有很多漏洞,当时也是刚开始接触Highchart,有很多问题没说清楚。
今天重开一贴,希望能理清楚,大家一看就知道怎么用。
1、首先下载highchart,并引入js:
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/highchart/highcharts.js"></script>
2、构造图表容器:
<div id="adschartContainer" style="min-width: 400px; height: 500px; margin: 0 auto"> </div>
3、在javascript中初始化图表
<script> $(function() { var adsChart; adsChart = new Highcharts.Chart({ chart : { renderTo : 'adschartContainer', defaultSeriesType : 'spline', }, title : { text : '广告用户分析曲线图', x : -20 //center }, xAxis : { categories : [ ] }, yAxis : { title : { text : '总数量' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ] }, tooltip : { formatter : function() { //formatter格式化函数 return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y; } }, legend : { layout : 'vertical', align : 'right', verticalAlign : 'top', x : 0, y : 100, borderWidth : 0 }, series : [{name:'新用户'},{name:'老用户'},{name:'下载量'},{name:'安装量'},{name:'没广告'}] }); }); </script>
这样我们就初始化好了一个空的图表容器,这里横坐标、纵坐标都是空的。横坐标:categories : [ ];纵坐标:series : [{name:'新用户'},{name:'老用户'},{name:'下载量'},{name:'安装量'},{name:'没广告'}]
这里我们生成了四条曲线,series中每一个对象对应一条曲线,series要求的格式如下:
series : [{name:'新用户',data:[]},{name:'老用户',data[]}]
即每一条曲线需要一个data数组和一个名字,动态赋值我们只需要使用调用setdata方法即可。
(如果想要动态返回曲线名可以参考之前的博客SSH+Highcharts 生成动态图表 ——在思考中解决问题。)
4、动态构建曲线数值
在初始化容器完成以后我们可以发送请求到后台(ajax),下面这段代码直接接上面:
//给图表加载值 var url = '${pageContext.request.contextPath}/chartAction!getAdsChart.action'; $.post(url, function(response) { newList = response.newList; oldList = response.oldList; downList = response.downList; installList = response.installList; timList = response.timList; adsChart.series[0].setData(newList); adsChart.series[1].setData(oldList); adsChart.series[2].setData(downList); adsChart.series[3].setData(installList); adsChart.xAxis[0].setCategories(timList); }, "json");
这样后台给我们返回了5个对象数字(4条曲线,1个横坐标数组)
{"downList":[24923,38372,31822,27931,26572,25253,24752,25002,19527,23401,26602,25912,37069,83962,46483,24686,5229,5506,41448,36060],"installList":[5988,5806,6026,6428,6312,6196,6203,6515,6059,6027,6372,6757,6485,9242,8385,7026,4826,4231,7437,8262],"loseList":[646,783,857,883,936,1028,1013,1106,1087,1076,1075,1144,0,106,386,552,609,621,672,739],"newList":[6159,5590,6051,6102,6139,5931,5501,6254,6142,6060,6277,6381,5670,5902,5603,5557,5591,6041,5844,5768],"oldList":[47817,47339,48629,49456,49324,49312,48391,50188,50842,50944,51715,52555,51431,52626,52045,51511,51440,52628,52928,52985],"timList":["07-01","07-02","07-03",...]}
到这一步应该就能生成图表了。
至于后台数据无非就是将其查询出来并放到对象里面返回给前端即可。
后台处理数据对象类:
public class HighChart { private List<Long> newList=new ArrayList<Long>(); private List<Long> oldList=new ArrayList<Long>(); private List<Long> downList = new ArrayList<Long>(); private List<Long> installList = new ArrayList<Long>(); private List<Long> loseList = new ArrayList<Long>(); private List<String> timList = new ArrayList<String>(); getter and setter... }
结果如下:
ps:话说我现在还是比较喜欢Echarts啊!!!!
相关推荐
jQuery+highcharts各种数据统计图表代码 jQuery+highcharts各种数据统计图表代码 jQuery+highcharts各种数据统计图表代码
jquery+ajax+highcharts+mysql实战例子,需要配套视频请留言
1.dwz+thinkPHP+Highcharts实例 2.xpcms添加了Highcharts例子-点击DVR分析组可查看 3.安装前,先删除Install下的install.lock。
ext3.0+highcharts+ext时间日期控件+jquery+json
实现一个简单ajax+jquery+highcharts+json例子,主要让初学者了解ajax+jquery是怎么接受后台传过来的json数据,并显示到前台highcharts中的,以及js文件应该如何放置等问题。
模仿花火基于react+Highcharts做的一款在线图表制作工具。操作简单,降低可视化信息生产门槛。化繁为简,将枯燥的数据转化成易懂的图表,为数据和信息增值。数可视专注数据可视化
分享课程——基于JSONP+ngBind+ngRepea技术实战美玩网(BootStrap+AngularJS+JMS+Highcharts);本教程主要从基础出发到项目的整体框架整合,整个大纲内容涉及面较为广泛,涉及到数据库技术,javaEE技术点,web框架...
这个一个比较完整的ssh整合后实现导入导出excel、百度富文本编辑器使用、highcharts统计图表应用、clob大对象处理等综合性、实用性比较强的案例代码实现
python项目开发实战_招聘信息实时数据分析系统(网络爬虫+Flask+Highcharts+MySQL)_编程案例实例课程教程.pdf
静态网页设计大作业-基于JavaScript+html+css+highcharts实现安居客某小区房价走势图 - 不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是个人的毕设,代码都测试ok,都是运行成功后才上传资源,答辩评审...
easyUI+HighCharts+Aspose.cells+Aspose.word+Aspose.Pdf+WebService等的实例应用,easyui包括异步树加载,嵌套表格等,highcharts包括本地导出图片(仅限jpg)柱状,线状图例等,aspose.word、excel、pdf等使用的...
实例如下: <!DOCTYPE ...<... <head>...html+js+highcharts绘制圆饼图表的简单实例</title> <script type="te
网上的资源将的都很笼统也不全面,我也是在学习这些东西,把自己写的稍微整合了一下,应该时候新手看,能够完全运行,只要自己附加...Jquery中easyui的运用,ajax后台数据的传输,Json的拼接,highcharts获取后台数据!
本文的贡献如下: 1、实现了直线方程式、多项式方程式以及由这两种方程式组合的分段函数,使得用户可以根据需求,制定相关的公式。 2、通过js和bootstrap实现了较好的用户交互界面,用户可添加任意数量的直线方程式...
数据统计报表 数据统计报表 数据统计报表模板数据统计报表 数据统计报表
一个非常实用的storm入门demo,从生产数据源,后端到前端展示一应俱全,只需安装一个kafka和hbase环境即可,有readme说明!
前台使用easyui和jquery,后端使用ssm。dao层使用了mybaties和spring的jdbctemplte。项目中使用poi技术实现excel...使用highcharts来绘制分析图表。项目中还涉及导ftps密文文件服务器的使用。实现了文件的上传与下载。
1.趋势图和时段图切换。 2.利用dhtmlxcolorpicker颜色切换。 3.实时数据监控 4.实际项目。
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图...