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: [{

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: [{

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: [{

// 根據名字對應到相應的系列

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/zh-tw/n/126599.html

chartjs接收json的簡單介紹

相關推薦

發表回復