动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给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动态获取数据生成图表问题相关推荐

  1. Echarts 动态获取数据进行图表的展示

    http://www.oschina.net/code/snippet_2283085_51247

  2. 使用 HighCharts 动态获取后台数据生成图表

    在最近的一个小项目中,因为需要统计一些数据,便想着把它做成一个图表的样式更直观的显示.因为考虑到需要在页面上灵活的展示,所以就放弃了使用 jfreechart,很早便听说过 HighCharts这个生 ...

  3. flash 图表(XML动态获取数据)

    制作数据图表的插件有很多,像highcharts等,今天来讲一下用flash做图表,并用XML动态获取数据! 首先图表样式如下: HTML代码: <html> <head> & ...

  4. Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细

    Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细 代码块 <!DOCTYPE html> <head><meta charset=&q ...

  5. Highcharts使用表格数据绘制图表

    Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...

  6. python提取excel前十行生成图_Python读取Excel数据生成图表 v2.0

    Python读取Excel数据生成图表 v2.0 一.需求背景 自己一直在做一个周基金定投模拟,每周需要添加一行数据,并生成图表.以前一直是用Excel实现的.但数据行多后,图表大小调整总是不太方便, ...

  7. JIra+Python+Pyechart 通过分析jira数据生成图表并展示,出具质量可视化的测试报告

    背景: 我本人不愿意写测试报告,但领导规定每个迭代后都需要发一份测试报告,让我比较难受(不是不会写,主要是测试报告内容比较详实,几乎没有人会细看),没有人看就=流于形式 那么,有没有一种方法,既满足了 ...

  8. python读excel表格数据绘制图表_Python读取Excel数据生成图表 v2.0

    原博文 2020-06-15 15:09 − ## Python读取Excel数据生成图表 v2.0 ## 一.需求背景 自己一直在做一个周基金定投模拟,每周需要添加一行数据,并生成图表.以前一直是用 ...

  9. 微信小程序使用echarts动态获取数据

    Number2 echarts动态获取数据 继续上一篇,结合echarts动态获取数据 官方提供了一个微信与echarts相结合的数据,里面就是简单的各种工具,数据获取没有进行动态绑定,各种搜索资料最 ...

最新文章

  1. The Interface name: -- index:21 you checked seems not up.
  2. draw.io项目本地部署
  3. u-boot的linux内核映像加载,基于U_Boot的Linux内核映像加载与引导功能实现.pdf
  4. 关于css的基础知识点
  5. usb转并口支持linux,使用PCI转并口实现SJF刷写嵌入式开发板
  6. cachestat、cachetop、pcstat-linux系统缓存命中率分析工具
  7. spring boot controller 初始化_使用 Spring 快速创建 web 应用的两种方式
  8. 雷林鹏分享:Ruby 发送邮件 - SMATP
  9. raid1与raid5
  10. 如何用matlab做拉普拉斯变换,利用MATLAB实现拉普拉斯变换和其逆变换
  11. 视频号视频如何下载?
  12. vue将文件/图片/视频批量打包成压缩包,并进行下载
  13. 未成年人勿进 谨以献给1980~1990出生的人(五)
  14. 机器学习PAI为你自动写歌词,妈妈再也不用担心我的freestyle了(提供数据、代码)...
  15. 计算机无法显示移动硬盘,电脑不显示移动硬盘怎么办 检测不到移动硬盘的原因...
  16. 云计算赛项-私有云skywalking服务部署与应用
  17. ArcGIS 9.3下载,包含ArcGIS Desktop、ArcGIS Engine、ArcGIS Server、ArcSDE、workstation
  18. JAVA中phrase居左_mymail iText中用文本块(chunk)、短语(Phrase)和段 联合开发网 - pudn.com...
  19. 题解 2360: [信息学奥赛一本通-T1449]魔板
  20. AutoJs Pro 7.0.4-1 实战教程---史上最全快手极速版

热门文章

  1. java跟踪会话_JavaWeb会话跟踪
  2. idea自动生成not null判断语句
  3. Collection和Collections区别
  4. 电缆的验证、鉴定和认证应该选择什么测试工具
  5. 利用福禄克DSX2-5000 CH解决双绞线布线中常见的故障
  6. 看漫画,学Linux内核!看完明白小企鹅们在干啥了吧?
  7. Linux下文件查找命令find笔记
  8. C#获取电脑IP、MAC地址示例代码
  9. JavaScript框架的超简史
  10. c语言不循环链表,无头单向不循环链表相关接口实现(C语言)