highcharts动态获取数据生成图表问题
动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说)。
柱状图的动态传值:
//获取后台数据var x = [];//X轴var y = [];//Y轴var xtext = [];//X轴TEXTvar color = ["#FFB6C1","#DC143C","#C71585","#D8BFD8","#8B008B","#4B0082","#6A5ACD","#0000FF","#B0C4DE","#1E90FF","#00CED1","#228B22"];$.ajax({type:'post',url:'${pageContext.request.contextPath}/InOrder!showInfoList.do',success:function(data){var json = eval("("+data+")");//转换数据 for(var key in json.rows){json.rows[key].y = json.rows[key].money; //给Y轴赋值xtext = json.rows[key].name;//给X轴TEXT赋值json.rows[key].color= color[key];}//新建图表 chart = new Highcharts.Chart({ chart: { renderTo: 'container', //图表放置的容器,关联DIV#id type: 'column', //柱状图 reflow:true //自适应div的大小 }, title: { text: '分类采购额' //图表标题 }, xAxis: { //X轴标签 categories:[xtext]}, yAxis: { //设置Y轴 title: { text: '采购额 (元)' } },credits:{ //右下角文本不显示enabled: false},tooltip:{ //鼠标移动到图形上时显示的提示框 headerFormat: '{series.name}:<span style="font-size:12px"><b>{point.key}</b></span><table>',pointFormat: '<tr><td>采购额: </td>' +'<td style="padding:0"><b>{point.y:.1f} ¥</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true}, series:[{name:"商品类别"}] }), chart.series[0].setData(json.rows);//数据填充到highcharts上面},
} error:function(e){}});
//action层调用从数据库中查询出来的方法,获取数据。Dao层从数据库中查询,与service层调用Dao层方法
public void showInfoList() throws IOException{ List list = null;List _list = new ArrayList();try {list = (ArrayList<DocProSto>)inOrderListService.CountAll(); //调用查询方法 if(list.size()>0){for(DocProSto pro:list){ //遍历后台传值Map<String,Object> map = new HashMap<String,Object>();map.put("money",pro.getMoney() );map.put("name", pro.getProduct().getTprosort().getName());map.put("number",pro.getNumber());_list.add(map); }}} catch (Exception e) {e.printStackTrace();}Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map jsonMap.put("rows", _list);//rows键 存放每页记录 list result = JSON.toJSONStringWithDateFormat(jsonMap,"yyyy-MM-dd");//格式化resultresponse.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();out.print(result);out.flush();out.close();}
转载于:https://www.cnblogs.com/zcleilei/p/5909802.html
highcharts动态获取数据生成图表问题相关推荐
- Echarts 动态获取数据进行图表的展示
http://www.oschina.net/code/snippet_2283085_51247
- 使用 HighCharts 动态获取后台数据生成图表
在最近的一个小项目中,因为需要统计一些数据,便想着把它做成一个图表的样式更直观的显示.因为考虑到需要在页面上灵活的展示,所以就放弃了使用 jfreechart,很早便听说过 HighCharts这个生 ...
- flash 图表(XML动态获取数据)
制作数据图表的插件有很多,像highcharts等,今天来讲一下用flash做图表,并用XML动态获取数据! 首先图表样式如下: HTML代码: <html> <head> & ...
- Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细
Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细 代码块 <!DOCTYPE html> <head><meta charset=&q ...
- Highcharts使用表格数据绘制图表
Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...
- python提取excel前十行生成图_Python读取Excel数据生成图表 v2.0
Python读取Excel数据生成图表 v2.0 一.需求背景 自己一直在做一个周基金定投模拟,每周需要添加一行数据,并生成图表.以前一直是用Excel实现的.但数据行多后,图表大小调整总是不太方便, ...
- JIra+Python+Pyechart 通过分析jira数据生成图表并展示,出具质量可视化的测试报告
背景: 我本人不愿意写测试报告,但领导规定每个迭代后都需要发一份测试报告,让我比较难受(不是不会写,主要是测试报告内容比较详实,几乎没有人会细看),没有人看就=流于形式 那么,有没有一种方法,既满足了 ...
- python读excel表格数据绘制图表_Python读取Excel数据生成图表 v2.0
原博文 2020-06-15 15:09 − ## Python读取Excel数据生成图表 v2.0 ## 一.需求背景 自己一直在做一个周基金定投模拟,每周需要添加一行数据,并生成图表.以前一直是用 ...
- 微信小程序使用echarts动态获取数据
Number2 echarts动态获取数据 继续上一篇,结合echarts动态获取数据 官方提供了一个微信与echarts相结合的数据,里面就是简单的各种工具,数据获取没有进行动态绑定,各种搜索资料最 ...
最新文章
- The Interface name: -- index:21 you checked seems not up.
- draw.io项目本地部署
- u-boot的linux内核映像加载,基于U_Boot的Linux内核映像加载与引导功能实现.pdf
- 关于css的基础知识点
- usb转并口支持linux,使用PCI转并口实现SJF刷写嵌入式开发板
- cachestat、cachetop、pcstat-linux系统缓存命中率分析工具
- spring boot controller 初始化_使用 Spring 快速创建 web 应用的两种方式
- 雷林鹏分享:Ruby 发送邮件 - SMATP
- raid1与raid5
- 如何用matlab做拉普拉斯变换,利用MATLAB实现拉普拉斯变换和其逆变换
- 视频号视频如何下载?
- vue将文件/图片/视频批量打包成压缩包,并进行下载
- 未成年人勿进 谨以献给1980~1990出生的人(五)
- 机器学习PAI为你自动写歌词,妈妈再也不用担心我的freestyle了(提供数据、代码)...
- 计算机无法显示移动硬盘,电脑不显示移动硬盘怎么办 检测不到移动硬盘的原因...
- 云计算赛项-私有云skywalking服务部署与应用
- ArcGIS 9.3下载,包含ArcGIS Desktop、ArcGIS Engine、ArcGIS Server、ArcSDE、workstation
- JAVA中phrase居左_mymail iText中用文本块(chunk)、短语(Phrase)和段 联合开发网 - pudn.com...
- 题解 2360: [信息学奥赛一本通-T1449]魔板
- AutoJs Pro 7.0.4-1 实战教程---史上最全快手极速版