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 母版页动态获取数据进行渲染
经常需要将一些通用的页面元素抽离出来制作成母版页,但是这里的元素一般都是些基本元素,即不需要 进行后台数据交换的基本数据,但是对于一些需要通过后台查询的数据,我们应该怎么传递给前台的母版页呢 这里描述 ...
随机推荐
- Lucene5.x 中文 同义词
查询好好多资料,英文同义词好好的,中文就不行,多谢网友支持,拼接了好多代码,然后修改了一些,不足之处,多谢指正. 直接上代码吧,在代码中了解怎么分词的最好 1,创建分词引擎 public interf ...
- C++拷贝构造函数详解 转
一. 什么是拷贝构造函数 首先对于普通类型的对象来说,它们之间的复制是很简单的,例如: [c-sharp] view plaincopy int a = 100; int b = a; 而类对象与普通 ...
- jQuery获取Select选择的Text和 Value
jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...}); //为Se ...
- include()、include_once()与require()、require_once()的异同点
相同点: 首先include().include_once()与require().require_once()都是用来包含并运行指定文件的,并且包含的文件在执行时在结构上是完全一样的. 例如:inc ...
- mysql的查询缓存模式介绍
mysql的查询缓存 查询是数据库技术中最常用的操作.查询操作的过程比较简单,首先从客户端发出查询的SQL语句,数据库服务端在接收到由客户端发来的 SQL语句后, 执行这条SQL语句,然后将查询到的结 ...
- ubuntu 安装apache2,mysql,php5,phpmyadmin等软件
1.安装apache2 sudo apt-get install apache2 输入Y回车 apache2 安装完成 检测:在浏览器输入localhost 出现It works则成功. 2. ...
- Forward reference vs. forward declaration
Q:Im a bit confused. What is the difference between forward declaration and forward reference? Forwa ...
- JSP基础笔记
主要内容:1. JSP基础2. Cookie3. HttpSession ================================ JSP基础 1. jsp的作用: * Servlet: &g ...
- 数据结构练习 01-复杂度2. Maximum Subsequence Sum (25)
Given a sequence of K integers { N1, N2, ..., NK }. A continuous subsequence is defined to be { Ni, ...
- 深入Spring之web.xml
针对web.xml我打算从以下几点进行解析: 1.ContextLoaderListener: 启动Web容器时,自动装配ApplicationContext的配置信息. 2.RequestConte ...