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 母版页动态获取数据进行渲染
经常需要将一些通用的页面元素抽离出来制作成母版页,但是这里的元素一般都是些基本元素,即不需要 进行后台数据交换的基本数据,但是对于一些需要通过后台查询的数据,我们应该怎么传递给前台的母版页呢 这里描述 ...
随机推荐
- AngularJS cookie的使用
Javascript使用document.cookie接口来处理简单的文本cookie,但现在大多数现代浏览器都可以使用html5 API了(sessionstorage和localstorage), ...
- Spring Security Encryption三种加密方式
Encryption One-way encryption 单项加密,客户端将要传递的值先加密(使用特定的加密方法),将原值和加密好的值传递过去,服务器端将原始数据也进行一次加密(两者加密 ...
- 3D math primer for graphics and game development
三角网格(Triangle Mesh) 最简单的情形,多边形网格不过是一个多边形列表:三角网格就是全部由三角形组成的多边形网格.多边形和三角网格在图形学和建模中广泛使用,用来模拟复杂物体的表面,如建筑 ...
- C++和MATLAB混合编程-DLL
先小话一下DLL,DLL是动态链接库,是源代码编译后的二进制库文件和程序接口,和静态链接库不同的是,程序在编译时并不链接动态链接库的执行体,而是在文件中保留一个调用标记,在程序运行时才将动态链接库文件 ...
- 配置并学习微信JS-SDK(2)—图片接口
测试地址:http://www.qq210.com/shoutu/android 检查图像接口 选择本地或拍照的图片 上传选择的图片 预览上传的图片 //1.检查图像接口 document.query ...
- webapp框架—学习AngularUI2(demo改造)
目的:把AngularUI的模板应用到“桂电在线”上 步骤如下: 按功能表修改demo界面 学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段 // ...
- mysql 时间戳与日期格式的相互转换
1.UNIX时间戳转换为日期用函数: FROM_UNIXTIME() ); 输出:2006-08-22 12:11:10 2.日期转换为UNIX时间戳用函数: UNIX_TIMESTAMP() Sel ...
- BZOJ 2242 计算器
Description 你被要求设计一个计算器完成以下三项任务: \(1.\)给定\(y,z,p\),计算\(y^{z}\;mod\;P\)的值: \(2.\)给定\(y,z,p\),计算满足\(xy ...
- 【HTTP】全面比较HTTP GET与POST方法
全面比较HTTP GET与POST方法 1. 基本信息比较 属性 GET方法 POST方法 历史: 通常使用GET方法发送的数据作为URL的一部分将会被浏览器保存起来 使用POST方法提交 ...
- Hibernate 注解多对一 要求在多那边产生一个外键而不会另外产生一个表
在使用hibernate注解的时候,我们映射一对多时,有时候莫名其妙的产生了两张表,其中一张表是A_B,这并不符合数据库中多的一方放置一个外键的原则,那么如何控制只产生一个表呢,请看下面的例子: 多的 ...