动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说)。
  柱状图的动态传值:

//获取后台数据
var x = [];//X轴
var y = [];//Y轴
var xtext = [];//X轴TEXT
var 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");//格式化result
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(result);
out.flush();
out.close(); }

highcharts动态获取数据生成图表问题的更多相关文章

  1. echarts通过ajax动态获取数据的方法

    echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...

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

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

  3. ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】

    具体实现的效果如图:

  4. ECharts 从后台动态获取数据 (asp.net)

    (一) 使用工具 visual studio 2017:Web开发:asp.net (代码中的js引用路径以及ajax方法调用的url,记得修改哦) (二) 准备工作(此处写给和我一样小白) 1.动态 ...

  5. Echarts获取数据绘制图表

    这次是利用mui框架实现一个手机移动端的项目.基本的框架已经实现,主要来获取数据实现一个图表的展示. 首先引入插件:echarts.js <script src="../resourc ...

  6. React使用jquery方式动态获取数据

    好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js ...

  7. [经验总结] 从其它sheet页引用数据生成图表时没有图例的解决办法

    1.先给出一个在有数据区域的sheet页中生成的图表,比较全,图表和图例全部都有,如下图: 2.但是如果在其它 sheet页中引用该有数据的sheet数据时并生成图表,生成的图表只有图表区域显示,图例 ...

  8. JS动态获取数据

    JS访问数据,有实时获取数据的时候,请加上时间戳 如:'&stampflag=' + Math.round(new Date().getTime() / 1000); 因为有的浏览器(如IE9 ...

  9. asp.net mvc Areas 母版页动态获取数据进行渲染

    经常需要将一些通用的页面元素抽离出来制作成母版页,但是这里的元素一般都是些基本元素,即不需要 进行后台数据交换的基本数据,但是对于一些需要通过后台查询的数据,我们应该怎么传递给前台的母版页呢 这里描述 ...

随机推荐

  1. AngularJS 路由:ui-router

    UI-Router是Angular-UI提供的客户端路由框架,它解决了原生的ng-route的很多不足:视图不能嵌套.这意味着$scope会发生不必要的重新载入.这也是我们在Onboard中引入ui- ...

  2. JS-SDK微信支付开发攻略

    一.吐槽篇 一个字——坑!两个字——很坑!三个字——非常坑!首先,微信支付接口作为微信开发接口的一部分,竟然有一本书那么厚的官方文档,共36页,更重要的是,这36页还不能把开发的流程说清楚,描述过于分 ...

  3. html5 拖拽的简要介绍

    1,首先,你要告诉计算机那个元素可以拖动,或者是一张图,或者是一个盒子,在标签里面加上 draggable="true"  2,然后,监听该元素被拖动的函数 ondragstart ...

  4. ecshop标签

    页面标题         {$page_title}页面关键字       {$keywords}     产品分类                 父分类列表 {foreach from=$cate ...

  5. 帝国cms7.0修改“信息提示”框

    具体修改查看e/message/index.php文件 上传一张合适用的图 <table width="600" height="224" border= ...

  6. paramiko学习

    1. ssh简介 2. ssh私有key/共有key的区别 3. paramiko的常规使用

  7. Day16 DOM &jQuery

    一.本节主要内容 JavaScript 正则表达式 字符串操作的三个方法 DOM(知道就行,一般使用jQuery) 查找: 直接查找: document.getElementById 根据ID获取一个 ...

  8. 从MVC到前后端分离

    摘要:MVC模式早在上个世纪70年代就诞生了,直到今天它依然存在,可见生命力相当之强.MVC模式最早用于Smalltalk语言中,最后在其它许多开发语言中都得到了很好的应用,例如,Java中的Stru ...

  9. HJA的异或值

    HJA的异或值 查看 提交 统计 提问 总时间限制:  20000ms 内存限制:  512000kB 描述 形态形成场(Morphogenetic Field)假说是Rupert Sheldrake ...

  10. Oracle导出存储过程

    SQL> SELECT * FROM dba_directories ; OWN DIRECTORY_NAME DIRECTORY_PATH ------- ------------------ ...