动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给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. JS控制文字一个一个出现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 将[{},{}]转为dict

    经常遇到一种需求,需要把从数据库取出的数据,转为dict对象([{}, {},...]-->dict). rs = [{, , "name":"edf"} ...

  3. python的py文件打包成exe

    一.首先需要安装Pyinstaller-- 使用pip来安装模块 (我电脑上装的是python的一个编译环境Anaconda,如果电脑上装的是python自带的IDE的话,就直接进入python的安装 ...

  4. 2016021801 - Java内存区域学习笔记

    根据<深入理解java虚拟机>学习归纳整理学习笔记 程序计数器 用途:当前线程的字节码文件的行号指示器.(当前机场负责控制飞机降落的空管员:当前线程表示当前机场, 所执行的字节码等同于被等 ...

  5. 编译u-boot命令和u-boot常用命令

    一.编译u-boot命令 1.配置开发板 #make TQ2440_config 2.编译 #make all 3.交叉编译器是crosstools_3.4.5_softfloat” 使用4.3.3版 ...

  6. Android Studio与Genymontion的安装

    需要安装的软件: VirtualBox 5.1.4 Genymotion 2.7.2 Android Studio 2.1.2 安装步骤: 使用安装版安装Android Studio 1.     执 ...

  7. Android中自定义ListView无法响应OnItemClickListener中的onItemClick方法问题解决方案

    如果你的自定义ListViewItem中有Button或者Checkable的子类控件的话,那么默认focus是交给了子控件,而ListView 的Item能被选中的基础是它能获取Focus,也就是说 ...

  8. apache pdfbox

    转 http://www.blogjava.net/sxyx2008/archive/2010/07/23/326890.html 轻松使用apache pdfbox将pdf文件生成图 近期在项目中使 ...

  9. Ecshop wap

    http://www.08kan.com/gwk/MzA3MDMxMzAxMw/200091492/1/c38b5937e4e819d9908fe3ae964e3dfc.html

  10. Swift入门系列--Swift官方文档(2.2)--中文翻译--About Swift 关于Swift

    About Swift 关于Swift 官方文档的翻译,仅供参考,本人英语本就不好,边学边翻译,不喜勿喷. Swift is a new programming language for iOS, O ...