highcharts动态获取数据生成图表问题
动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给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动态获取数据生成图表问题的更多相关文章
- echarts通过ajax动态获取数据的方法
echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...
- Highcharts使用表格数据绘制图表
Highcharts使用表格数据绘制图表 在Highcharts中,同意用户使用网页中现有的表格数据作为数据来源,然后依据该数据来源绘制图表.对于一个典型的HTML表格.当中,第一列的数据会作为x轴刻 ...
- ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】
具体实现的效果如图:
- ECharts 从后台动态获取数据 (asp.net)
(一) 使用工具 visual studio 2017:Web开发:asp.net (代码中的js引用路径以及ajax方法调用的url,记得修改哦) (二) 准备工作(此处写给和我一样小白) 1.动态 ...
- Echarts获取数据绘制图表
这次是利用mui框架实现一个手机移动端的项目.基本的框架已经实现,主要来获取数据实现一个图表的展示. 首先引入插件:echarts.js <script src="../resourc ...
- React使用jquery方式动态获取数据
好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js ...
- [经验总结] 从其它sheet页引用数据生成图表时没有图例的解决办法
1.先给出一个在有数据区域的sheet页中生成的图表,比较全,图表和图例全部都有,如下图: 2.但是如果在其它 sheet页中引用该有数据的sheet数据时并生成图表,生成的图表只有图表区域显示,图例 ...
- JS动态获取数据
JS访问数据,有实时获取数据的时候,请加上时间戳 如:'&stampflag=' + Math.round(new Date().getTime() / 1000); 因为有的浏览器(如IE9 ...
- asp.net mvc Areas 母版页动态获取数据进行渲染
经常需要将一些通用的页面元素抽离出来制作成母版页,但是这里的元素一般都是些基本元素,即不需要 进行后台数据交换的基本数据,但是对于一些需要通过后台查询的数据,我们应该怎么传递给前台的母版页呢 这里描述 ...
随机推荐
- java经典题目练习-第八题简单实现方式...
*[程序8]*题目:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字.* 例如2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制. 思考: 对于以上 ...
- UVA 11825 Hackers’ Crackdown(集合动态规划 子集枚举)
Hackers’ Crackdown Miracle Corporations has a number of system services running in a distributed com ...
- css3多行省略号
-webkit-line-clamp 概述: -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. ...
- jquery插件-validate
1.引入js,css 下载地址:http://plugins.jquery.com/validate/ 2.设置验证规则:input的class添加以下验证属性 3.设置不符合规则的提示信息:添加da ...
- spoj gss2 : Can you answer these queries II 离线&&线段树
1557. Can you answer these queries II Problem code: GSS2 Being a completist and a simplist, kid Yang ...
- [CF Round #295 div2] C. DNA Alignment 【观察与思考0.0】
题目链接:C. DNA Alignment 题目大意就不写了,因为叙述会比较麻烦..还是直接看英文题面吧. 题目分析 经过观察与思考,可以发现,构造的串 T 的每一个字符都与给定串 S 的每一个字符匹 ...
- CAD文件导入AD09
1.首先将CAD图纸倒出为DXF格式的文件. 2.在altium designer 的pcb编辑中点菜单文件--导入,在弹出的对话框中,选择导入文件的类型,选择 DWG,DXF类型.然后确定,再弹出的 ...
- android 自定义命名空间
一.统一的用户界面是可以使得应用程序更友好.要做到用户界面的统一,我们就必须用到风格(style)和主题(theme).自定义一个View的方法步骤如下:1.首先,在values文件夹下定义一个att ...
- Git fork指令
ork并且更新一个仓库 现在有这样一种情形:有一个叫做Joe的程序猿写了一个游戏程序,而你可能要去改进它.并且Joe将他的代码放在了GitHub仓库上.下面是你要做的事情: fork并且更新GitH ...
- HashMap大小选择
java hashmap,如果确定只装载100个元素,new HashMap(?)多少是最佳的,why? 要回答这个问题,首先得知道影响HashMap性能的参数有哪些.咱们翻翻JDK. 在JDK6中是 ...