- 1、EXT框架下chart的json数据的显示问题
- 2、实现Echarts中数据的动态获取
- 3、open flash chart问题。我通过jofc2得到了json文件,但是页面上的flash始终不出来。高手解决一下
- 4、C#中Echarts如何获取oracle中的数据然后可视化,将数据库数据转json格式,用ajax获取数据给js可视化吗
完全的实时做不到,大概有个5秒左右的间隔还是可以接受的吧?这样:
在前端网页上,用javascript,使用ajax每隔5秒向服务器发起一个请求查询当前服务器的系统状态
服务器端php处理这个请求然后返回一个json或者xml的数据给前端
前端解析这个json或者xml数据,用js或者flash展示出来。
后端用php实现
前端用一个javascript框架,比如用Ext的Direct和Chart组件,或者用JQuery+Highchart共同来解决。
所以,要学习javascript,html,php吧
1.客户端通过ajax发送请求
先绘制一个最简单的Echarts图表:
(这里就直接贴上代码了,直接用的是官网教程里异步数据加载和更新里的代码)
!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”
html lang=”zh-CN”
head
meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″
titleECharts/title
!– 引入 echarts.js —
script type=”text/javascript” src=”echarts.min.js”/script
!– 引入jquery.js —
script type=”text/javascript” src=”jquery-1.12.3.js”/script
/head
body
!– 为ECharts准备一个具备大小(宽高)的Dom —
div id=”main” style=”width: 600px;height:400px;”/div
script type=”text/javascript”
var myChart = echarts.init(document.getElementById(‘main’));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: ‘异步数据加载示例’
},
tooltip: {},
legend: {
data:[‘销量’]
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: ‘销量’,
type: ‘bar’,
data: []
}]
});
/script
/body
/html
看到了吧,现在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。
下面贴上补充了ajax部分的完整前端代码:
!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”
html lang=”zh-CN”
head
meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″
titleECharts/title
!– 引入 echarts.js —
script type=”text/javascript” src=”echarts.min.js”/script
!– 引入jquery.js —
script type=”text/javascript” src=”jquery-1.12.3.js”/script
/head
body
!– 为ECharts准备一个具备大小(宽高)的Dom —
div id=”main” style=”width: 600px;height:400px;”/div
script type=”text/javascript”
var myChart = echarts.init(document.getElementById(‘main’));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: ‘异步数据加载示例’
},
tooltip: {},
legend: {
data:[‘销量’]
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: ‘销量’,
type: ‘bar’,
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names=[]; //类别数组(实际用来盛放X轴坐标值)
var nums=[]; //销量数组(实际用来盛放Y坐标值)
$.ajax({
type : “post”,
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : “TestServlet”, //请求发送到TestServlet处
data : {},
dataType : “json”, //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容,result即为服务器返回的json对象
if (result) {
for(var i=0;iresult.length;i++){
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for(var i=0;iresult.length;i++){
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: ‘销量’,
data: nums
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert(“图表请求数据失败!”);
myChart.hideLoading();
}
})
/script
/body
/html
2.服务器端Servlet接收请求
客户端的请求url是’TestServlet‘,那我们得先在web.xml配置以下映射:
servlet
servlet-nameTestServlet/servlet-name
servlet-classtest.TestServlet/servlet-class
/servlet
servlet-mapping
servlet-nameTestServlet/servlet-name
url-pattern/TestServlet/url-pattern
/servlet-mapping
然后就来着手写处理客户端请求的TestServlet啦!
3.生成json数据并返回给客户端
生成Json数据要用到额外的jar包,这里我使用的jackson,json-lib 2010年就没有再更新了… (2016-5-3日更:发现Google出品的Gson也蛮好用的,重点是很小巧,只需引入一个jar就搞定,用法也很简单)
简单介绍一下jackson的用法:
①:先去下载 jackson-core.jar,jackson-annotations.jar,jackson-databind.jar(都是2.x版本,jackson官网不知为何不提供服务了…这三个jar让我一阵好找)
②:在项目的项目WEB-INF/lib下引入这三个jar
然后就可以在TestServlet里使用jackson提供的工具类了。(关于jackson的详细用法,这里贴一下官网教程:)
TestServlet代码如下:
package test;
import java.io.IOException;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
public class TestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ListProduct list = new ArrayListProduct();
//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里,每个Product类的对象都可以看作是一个类别(X轴坐标值)与销量(Y轴坐标值)的集合
list.add(new Product(“衬衣”, 10));
list.add(new Product(“短袖”, 20));
list.add(new Product(“大衣”, 30));
ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类
String json = mapper.writeValueAsString(list); //将list中的对象转换为Json格式的数组
//System.out.println(json);
//将json数据返回给客户端
response.setContentType(“text/html; charset=utf-8”);
response.getWriter().write(json);
}
TestServlet类中用到的自定义的Product类代码如下:
package test;
public class Product {
private String name; //类别名称
private int num; //销量
public Product(String name, int num) {
this.name = name;
this.num = num;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
4.客户端接收数据后显示
客户端接受服务器数据并解析后,就可以正常显示图表数据了:
{“data-file”:flashvars} 这里写错了,把flashvars换成一个url,就对了,然后这个url返回一个JSon的,就可以了
接收MySQL数据
点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置网页链接
dip名称:使用英文且见名知义(最好使用驼峰命名法)。
dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。
进入如下界面,在黑窗口的run函数中编写JavaScript脚本,将获取到的数据转换成产品需要的数据结构,最后输出。
首先编写脚本获取数据,获取数据有2种方式,第一种是主动获取,第二种是被动接收,根据实际情况选择对应的获取数据方式。而每一种方式又有多种类型。
对接MySQL我们选择主动获取方式,点击输入-主动获取,选择第一项MySQL ,相应的接入MySQL的代码会自动填写在function run() 里面 ,in 为接入语句,executes为数据处理逻辑,outs处填写数据输出语句。
如下图,在1处添加接入MySQL数据源url,username,password,在2处添加查询简单的查询sql语句,查询自己需要的数据。
function run() {
var MysqlJdbcAdapter = Java.type(“com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter”);
while (true) {
try {
var adapter = new MysqlJdbcAdapter(“jdbc:mysql://127.0.0.1:3306/database?useUnicode=truecharacterEncoding=UTF-8”, “root”, “root”);
var data = adapter.getDataByTable(“select * from …”);
heartBeat.addInCount(data.size());
//executes…
//outs…
sleep(60000);
} catch (error) {
logger.error(“脚本执行错误:”,error);
}
}}
接收ActiveMq数据
点击JavaScript,进入配置页面,在1处填入dip名字,2处的地址为宿主机地址,默认为dip系统部署机器地址, 点击下一步,填写脚本配置。
dip名称:使用英文且见名知义(最好使用驼峰命名法)。
dip的宿主机:运行该dip的服务器ip地址,也是我们的数据处理服务器。