ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中
来源:互联网 发布:最终幻想15 amd优化 编辑:程序博客网 时间:2024/05/15 01:52
1导入包,搭建SSH框架。
导入JQuery的JS包,<script src="JS/jquery-1.7.1.js"></script>
导入ECharts的包。<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
前提你的SSH已经搭好了,数据已经传递到了Struts层。
2在Action层,将数据封装成JSON对象。并通过ServletResponse对象输出
我的实际功能将实际电量数据和计划电量数据显示到ECharts图表上。将实际电量和计划电量均放到ArrayList中,然后将这两个ArrayList放到一个ArrayList中,比如叫merge。之后将merge对象封装到封装到JSONArray中,这时的JSONArray其实存的是两个一位数组,然后将这个JSONArray对象通过Servlet的response对象输出,请求这个方法的JSP会获得这个对象。
public String getAllPower() {HttpServletRequest request = ServletActionContext.getRequest();HttpServletResponse response = ServletActionContext.getResponse();try {request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");} catch (UnsupportedEncodingException e) {// TODO Auto-generated catch blocke.printStackTrace();}List<Power> powers = powerCompareService.getAllPower();// 获取实际电量和计划电量List actualPowerList = new ArrayList();List expectedPowerList = new ArrayList();for (Power power : powers) {actualPowerList.add(power.getActualPower());expectedPowerList.add(power.getExpectedPower());}List<List> merge = new ArrayList();merge.add(actualPowerList);merge.add(expectedPowerList);JSONArray jsonArray = JSONArray.fromObject(merge);try {response.setHeader("Cache-Control", "no-cache");response.setContentType("aplication/json;charset=UTF-8");response.getWriter().print(jsonArray);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}// request.setAttribute("list_powers", powers);// return "success";return null;}注意需要return null;因为不希望struts导航到其他的地方,而是通过JQuery Ajax来请求。
3JQueryAjax请求JSON数据
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><head><meta charset="utf-8"><title>ECharts</title><!-- 来自百度CDN --><script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script><script src="JS/jquery-1.7.1.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main1" style="height:400px"></div><button type="button" id="button1">显示/隐藏</button><script type="text/javascript">$(function() {$("#button1").click(function() {$("#main1").slideToggle(999);});});var actualPower = new Array();var expectedPower = new Array();$.ajax({url : 'Power.action',type : 'GET',dataType : 'json',async : false,success : function(jsonArray) {for (x in jsonArray[0]) {actualPower[x] = jsonArray[0][x];}for (x in jsonArray[0]) {expectedPower[x] = jsonArray[1][x];}}});// 路径配置require.config({paths : {'echarts' : 'http://echarts.baidu.com/build/echarts','echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'}});// 使用require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载], function(ec) {// 基于准备好的dom,初始化echarts图表var myChart = ec.init(document.getElementById('main1'));var option = {title : {text : '发电量对比',subtext : '模拟测试'},tooltip : {trigger : 'axis'},legend : {data : [ '逆变器', '汇流箱', '发电单元1', '发电单元2' ]},toolbox : {show : true,feature : {mark : {show : true},dataView : {show : true,readOnly : false},magicType : {show : true,type : [ 'line', 'bar' ]},restore : {show : true},saveAsImage : {show : true}}},calculable : true,xAxis : [ {type : 'category',data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月', '10月', '11月', '12月' ]} ],yAxis : [ {type : 'value'} ],series : [ {name : '逆变器',type : 'line',data : actualPower,markPoint : {data : [ {type : 'max',name : '最大值'}, {type : 'min',name : '最小值'} ]},markLine : {data : [ {type : 'average',name : '平均值'} ]}}, {name : '汇流箱',type : 'bar',data : actualPower,markPoint : {data : [ {type : 'max',name : '最大值'}, {type : 'min',name : '最小值'} ]},markLine : {data : [ {type : 'average',name : '平均值'} ]}}, {name : '发电单元1',type : 'bar',data : actualPower,markPoint : {data : [ {type : 'max',name : '最大值'}, {type : 'min',name : '最小值'} ]},markLine : {data : [ {type : 'average',name : '平均值'} ]}}, {name : '发电单元2',type : 'bar',data : expectedPower,markPoint : {data : [ {name : '年最高',value : 182.2,xAxis : 7,yAxis : 183,symbolSize : 18}, {name : '年最低',value : 2.3,xAxis : 11,yAxis : 3} ]},markLine : {data : [ {type : 'average',name : '平均值'} ]}} ]};// 为echarts对象加载数据 myChart.setOption(option);});</script></body>
$.ajax({
url : 'Power.action',
type : 'GET',
dataType : 'json',
async : false,
success : function(jsonArray) {
for (x in jsonArray[0]) {
actualPower[x] = jsonArray[0][x];
}
for (x in jsonArray[0]) {
expectedPower[x] = jsonArray[1][x];
}
}
});
其中 url的参数是请求的action
dataType数据类型选择json
success是请求成功后的返回,jsonArray就是请求成功,上面的Action的方法通过Servlet传递过来的Json对象。二维数组jsonArray[0]直接能获取到第一个封装的ArrayList,而jsonArray[0][x]获取到ArrayList中的第x个数据。
具体参考参数如下:
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
type:要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和
timeout:要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设
async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。
cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。
data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格
dataType:要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime
beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义
complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。
success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错
contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认
dataFilter:要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。
global:要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局
ifModified:要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。
jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。
username:要求为String类型的参数,用于响应HTTP访问认证请求的用户名。
password:要求为String类型的参数,用于响应HTTP访问认证请求的密码。
processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度
scriptCharset:要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时
4 ECharts
ECharts中的图表数据填充就是Array()对象。
data:actualPower,
这里直接填充了JSON传递过来的数据。
5显示效果图
- ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中
- Django中从mysql数据库中获取数据传到echarts
- echarts中数据的循环
- echarts-JSON请求数据
- Echarts地图省市关联下钻,读取数据库中数据
- echarts往ssh项目中引入
- 将XML数据填充到TreeView中
- SSH将Excel中的数据读入保存到数据库中
- Echarts图表中动态数据显示
- ECharts获取后台json数据
- Echarts请求json数据实例
- Echarts怎么获取json数据
- Echarts地图报表,从数据库获取数据,json传值
- echarts图表ajax获取数据填充
- 百度echarts中地图
- 项目中应用Echarts
- react中使用echarts
- vuejs中使用echarts
- Android SDK无法显示更新列表解决方法
- POJ 1945 Power Hungry Cows(打表技巧)
- 水题(细节考察getline) 之 hdu 2072
- Colorization, Gray, Color-to-Gray, Color Models
- POJ1159——Palindrome——DP+滚动数组(节省空间)
- ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中
- Java笔试题集锦
- Web.xml配置详解
- C#开发active插件!
- Declaring Variables in Assembly Language
- python中为list中含list元素指定偏移key量及次偏移量的排序算法
- Picture control显示图像及Mat转换为CImage
- HDU4869:Turn the pokers(费马小定理+快速幂)
- 用Dancing Links求解精确覆盖问题