圖表插件
- jquery插件使用舉例：
$("#shieldui-chart1").shieldChart({
theme: "dark",
primaryHeader: {
text: "Overall Throughput"
},
exportOptions: {
image: false,
print: false
},
dataSeries: [{
seriesType: "area",
collectionAlias: "tuple / second",
data: performance
}]
});
json數(shù)組
var traffic = [ {
Source: "dataChunkDir", Amount: 323
},
{
Source: "metadataDir", Amount: 345
},
{
Source: "Social", Amount: 567
},
{
Source: "Search", Amount: 234
},
{
Source: "Internal", Amount: 111
}];//定義數(shù)組
var j = {Source: "dataChunkDir", Amount: 323};
traffic.push(j);//添加對(duì)象元素`
JS遍歷json對(duì)象
var nowStr = {"name":"Rolf", "password":"123"};
for(var k in nowStr){
var key = k;//key
var value = nowStr[k];//value
}
或者
for(var i = 0; i < nowStr.length; i++){ alert(nowStr[i].name + " " +nowStr[i].password);
}
通過JS動(dòng)態(tài)添加table的tr,td
var table = document.getElementById("datatable");
var newRow = table.insertRow(); //創(chuàng)建新行
var newCell1 = newRow.insertCell(0); //創(chuàng)建新單元格
newCell1.innerHTML = "<td>Rolf</td>" ; //單元格內(nèi)的內(nèi)容
newCell1.setAttribute("align","center"); //設(shè)置位置
var newCell1 = newRow.insertCell(1); //創(chuàng)建新單元格
newCell1.innerHTML = "<td>123</td>" ; //單元格內(nèi)的內(nèi)容
newCell1.setAttribute("align","center"); //設(shè)置位置
Ajax獲取后臺(tái)數(shù)據(jù)
JS端
方法一：
$.ajax({
type: 'GET',
url: "<%=path%>/clientTest",
data: null ,
dataType: "json",
success:function(data) {
// alert("success");
var nowStr = data;
},
error : function() {
// view("異常厂画！");
alert("failed十气！");
}
});
其中蚀之，1邑滨、
data:{ username:$("#username").val(), content:$("#content").val() }, 這個(gè)data是客戶端傳到服務(wù)器端的數(shù)據(jù)。
2捅僵、success:function(data) 這個(gè)data是服務(wù)器端返回客戶端的數(shù)據(jù)
方法二：
//1. 創(chuàng)建ajax對(duì)象
var ajax;// createAjax();
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
ajax=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
//alert(ajax!=null?"創(chuàng)建ajax成功家卖！":"創(chuàng)建ajax失敗Ｃ沓上荡！");
//2.定義調(diào)用函數(shù)
function chart() {
//3. 準(zhǔn)備發(fā)送請(qǐng)求
/*
method表示發(fā)送請(qǐng)求的方式，例如GET或POST
url表示發(fā)送請(qǐng)求的目標(biāo)地址
可選的boolean值
>>true：表示該請(qǐng)求是異步的馒闷，這是默認(rèn)值酪捡，web2.0
>>false：表示該請(qǐng)求是同步的叁征，web1.0
*/
var method = "GET";
<%String path = request.getContextPath();%>//獲取當(dāng)前路徑
var url = "<%=path%>/clientTest";//交互的類
ajax.open(method, url, true);
//4. 真正發(fā)送異步請(qǐng)求
/*
content表示發(fā)送請(qǐng)求的內(nèi)容，如果無內(nèi)容的話沛善，使用null表示
如果有內(nèi)容航揉，寫成key=value形成塞祈，例如：username=jack&password=123
*/
var content = "111";
ajax.send(content);
//5. ajax對(duì)象監(jiān)聽服務(wù)器的響應(yīng)
ajax.onreadystatechange = function() {
//如果ajax對(duì)象金刁，已經(jīng)完全接收到了響應(yīng)，
if (ajax.readyState == 4) {
//如果響應(yīng)正確
if (ajax.status == 200) {
var nowStr = JSON.parse(ajax.responseText);//轉(zhuǎn)化為json對(duì)象
alert(json.name);//輸出對(duì)象的name屬性
或者
//定位span標(biāo)簽
var spanElement = document.getElementsByTagName("span")[0];
//將nowStr放當(dāng)span標(biāo)簽內(nèi)
spanElement.innerHTML = nowStr;
}
}
};
};
后臺(tái)
3.發(fā)送ajax對(duì)象
SystemState systemState = new SystemState();//新建空對(duì)象
操作對(duì)象
String jsonStr = json.toString();//轉(zhuǎn)化為json字符串
System.out.println(json.toString());
response.getWriter().write(jsonStr);//獲取輸出流對(duì)象
//通過流對(duì)象议薪，將信息輸出到AJAX對(duì)象
js中Double類型數(shù)據(jù)保留兩位小數(shù)（非四舍五入）
var a = 3.346234325;
var b = parseFloat(a).toFixed(3);
var result = b.substring(0,b.toString().length - 1); //這里先將a轉(zhuǎn)換為float類型再保留三位小數(shù)尤蛮，最后截取字符串前b.length - 1位
document.write(result);
Echarts圖表使用
smooth:false/true; //折線是否平滑
parallelAxis.type: 坐標(biāo)軸類型。
可選：
'value' 數(shù)值軸斯议，適用于連續(xù)數(shù)據(jù)产捞。
'category' 類目軸，適用于離散的類目數(shù)據(jù)哼御，為該類型時(shí)必須通過 data 設(shè)置類目數(shù)據(jù)坯临。
'time' 時(shí)間軸，適用于連續(xù)的時(shí)序數(shù)據(jù)恋昼，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化看靠，在刻度計(jì)算上也有所不同，例如會(huì)根據(jù)跨度的范圍來決定使用月液肌，星期挟炬，日還是小時(shí)范圍的刻度。
'log' 對(duì)數(shù)軸嗦哆。適用于對(duì)數(shù)數(shù)據(jù)谤祖。
parallelAxis.name: 坐標(biāo)軸名稱。
parallelAxis.nameLocation: 坐標(biāo)軸名稱顯示位置老速。
可選：
'start'
'middle'
'end'
parallelAxis.nameTextStyle: 坐標(biāo)軸名稱的文字樣式粥喜。
parallelAxis.nameGap: 坐標(biāo)軸名稱與軸線之間的距離。
xAxis.axisLabel.interval:坐標(biāo)軸刻度標(biāo)簽的顯示間隔橘券，在類目軸中有效额湘。
默認(rèn)會(huì)采用標(biāo)簽不重疊的策略間隔顯示標(biāo)簽。
可以設(shè)置成 0 強(qiáng)制顯示所有標(biāo)簽约郁。
如果設(shè)置為 1缩挑，表示『隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽』，如果值為 2鬓梅，表示隔兩個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽供置，以此類推。
xAxis.axisLabel.showMinLabel:是否顯示最小 tick 的 label绽快〗嫔ィ可取值 true, false, null紧阔。默認(rèn)自動(dòng)判定（即如果標(biāo)簽重疊，不會(huì)顯示最小 tick 的 label）续担。
修改坐標(biāo)軸顏色：
axisLine:{
lineStyle:{
color:'yellow',
width:8,//這里是為了突出顯示加上的擅耽，可以去掉
}
}
