easyui和highcharts 動態載入資料和X軸資料
阿新 • • 發佈：2019-02-08
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/jquery-1.8.2.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/jquery-easyui-1.4.5/jquery.easyui.min.js"type="text/javascript"></script>
<link href="${pageContext.request.contextPath}/resource/jquery-easyui-1.4.5/themes/default/easyui.css"rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/resource/jquery-easyui-1.4.5/themes/icon.css"rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<script type="text/javascript">
//定義一個Highcharts的變數，初始值為null
var oChart = null;
//定義oChart的佈局環境
//佈局環境組成：X軸、Y軸、資料顯示、圖示標題
var oOptions = {
//設定圖表關聯顯示塊和圖形樣式
chart: {
renderTo: 'container', //設定顯示的頁面塊
type:'line' , //設定顯示的方式
type: 'column'
},
//圖示標題
title: {
text: '學生資訊查詢', //設定標題
//text: null, //設定null則不顯示標題
},
credits: {//去除水印
enabled: false
},
//x軸
xAxis: {
title: {
text: '時間'
},
categories:[]
},
//y軸
yAxis: {
title: { text: '分數' }, //設定Y軸標題關閉
},
//資料列
series: [{
data:[]
}]
};
$(document).ready(function(){
oChart = new Highcharts.Chart(oOptions);
//非同步新增第2條資料列
LoadSerie_Ajax();
});
//非同步讀取資料並載入到圖表
function LoadSerie_Ajax() {
oChart.showLoading();
$.ajax({
url: "../statistic/statisticOneInfo",
type : 'POST',
dataType : 'json',
async : false, //同步處理後面才能處理新新增的series
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success : function(resp){
scoreValue = resp['score'];//分數
lineLabel=resp['date'];//時間
var oSeries = {
name: "語文",
data: scoreValue
};
for(var i=0;i<lineLabel.length;i++){
oOptions.xAxis.categories.push(lineLabel[i]);//動態載入x軸資料
}
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}
</script>
<body>
<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/jquery-1.8.2.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/jquery-easyui-1.4.5/jquery.easyui.min.js"type="text/javascript"></script>
<link href="${pageContext.request.contextPath}/resource/jquery-easyui-1.4.5/themes/default/easyui.css"rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/resource/jquery-easyui-1.4.5/themes/icon.css"rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<script type="text/javascript">
//定義一個Highcharts的變數，初始值為null
var oChart = null;
//定義oChart的佈局環境
//佈局環境組成：X軸、Y軸、資料顯示、圖示標題
var oOptions = {
//設定圖表關聯顯示塊和圖形樣式
chart: {
renderTo: 'container', //設定顯示的頁面塊
type:'line' , //設定顯示的方式
type: 'column'
},
//圖示標題
title: {
text: '學生資訊查詢', //設定標題
//text: null, //設定null則不顯示標題
},
credits: {//去除水印
enabled: false
},
//x軸
xAxis: {
title: {
text: '時間'
},
categories:[]
},
//y軸
yAxis: {
title: { text: '分數' }, //設定Y軸標題關閉
},
//資料列
series: [{
data:[]
}]
};
$(document).ready(function(){
oChart = new Highcharts.Chart(oOptions);
//非同步新增第2條資料列
LoadSerie_Ajax();
});
//非同步讀取資料並載入到圖表
function LoadSerie_Ajax() {
oChart.showLoading();
$.ajax({
url: "../statistic/statisticOneInfo",
type : 'POST',
dataType : 'json',
async : false, //同步處理後面才能處理新新增的series
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success : function(resp){
scoreValue = resp['score'];//分數
lineLabel=resp['date'];//時間
var oSeries = {
name: "語文",
data: scoreValue
};
for(var i=0;i<lineLabel.length;i++){
oOptions.xAxis.categories.push(lineLabel[i]);//動態載入x軸資料
}
oChart.addSeries(oSeries);
}
});
oChart.hideLoading();
}
</script>
<body>
<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>
</body>
</html>