chartjs接收json的简单介绍

  • 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地址,也是我们的数据处理服务器。

原创文章,作者:简单一点,如若转载,请注明出处:https://www.506064.com/n/126599.html

汽车小知识 小米SU7 今日油价 油耗计算器 电耗计算器 购置税计算器 贷款计算器 保险计算器 交通违章代码 体育新闻
(0)
简单一点的头像简单一点
上一篇 2024-10-03 23:09
下一篇 2024-10-03 23:09

相关推荐

  • 用Anaconda安装Python库的完整指南

    1、介绍 Python是一种非常受欢迎的编程语言,适用于从数据分析到机器学习的各种任务。Python有着大量的库和工具,可以使开发变得更加容易和高效。 安装Python库很重要,但…

    编程 2024-10-04
  • 深入了解Python中的super函数

    在Python中,有一个很神奇的函数叫做super(),它可以让我们在子类中调用父类的方法和属性。在本文中,我们将从多个方面对super函数进行详细的阐述,让你深入了解super函…

    编程 2024-11-04
  • PHP uniqid函数详解

    一、uniqid函数简介 在PHP中,uniqid函数是一个非常有用的函数,它用于生成一个唯一的ID,通常用于标识一些用户操作或日志记录。该函数在生成ID时会以服务器当前时间为基础…

    编程 2024-10-04
  • NodeSchedule:定期执行任务的完美方案

    一、NodeSchedule 是什么 NodeSchedule 是一个基于 Node.js 平台的第三方定时任务工具。它可以实现多种执行方式的定时任务,例如每隔一段时间执行一次、每…

    编程 2024-10-04
  • 很想学习php框架,php自学教程

    本文目录一览: 1、教新手如何去学习php框架 2、PHP框架之如何学习新的PHP框架 3、零基础,想学习PHP,应该先学习什么? 教新手如何去学习php框架 如果已经学会了一个p…

    编程 2024-11-01
  • mysql日志文件详述,mysql报错日志文件在哪

    本文目录一览: 1、mysql的二进制日志是什么,有什么作用 2、mysql 怎么看log? 3、MySQL binlog到底是什么东西? mysql的二进制日志是什么,有什么作用…

    编程 2024-10-08
  • 如何为网页设置背景颜色 – 前端实践

    网页背景颜色是网页设计中非常重要的一个方面。设置合适的背景颜色能够提高用户的浏览体验,让网页界面更加美观、舒适。本文将从DW如何设置网页背景颜色、CSS设置网页背景颜色、JS设置网…

    编程 2024-10-04
  • 包含php与seo的词条

    本文目录一览: 1、seo 与php之间有什么联系 2、用php 文件作为网站的页面,是否不利于搜索seo? 3、PHP网站怎么做SEO优化 seo 与php之间有什么联系 没有联…

    编程 2024-10-03
  • databaselink的使用详解

    一、databaselinks databaselinks 是Mathematica中的一个连接数据库的工具。在Mathematica中用于访问关系型数据库,它可以连接许多不同类型…

    编程 2024-10-04
  • js进度条代码怎么写(js做进度条)

    本文目录一览: 1、JS网页播放器的进度条究竟怎么做 高分求原理及代码 100分 2、js加载图片进度条应该怎么写 3、JS做的进度条,如何做的? 4、使用jquery.form.…

    编程 2024-10-03

发表回复

登录后才能评论