图表插件
- jquery插件使用举例：
$("#shieldui-chart1").shieldChart({
theme: "dark",
primaryHeader: {
text: "Overall Throughput"
},
exportOptions: {
image: false,
print: false
},
dataSeries: [{
seriesType: "area",
collectionAlias: "tuple / second",
data: performance
}]
});
json数组
var traffic = [ {
Source: "dataChunkDir", Amount: 323
},
{
Source: "metadataDir", Amount: 345
},
{
Source: "Social", Amount: 567
},
{
Source: "Search", Amount: 234
},
{
Source: "Internal", Amount: 111
}];//定义数组
var j = {Source: "dataChunkDir", Amount: 323};
traffic.push(j);//添加对象元素`
JS遍历json对象
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动态添加table的tr,td
var table = document.getElementById("datatable");
var newRow = table.insertRow(); //创建新行
var newCell1 = newRow.insertCell(0); //创建新单元格
newCell1.innerHTML = "<td>Rolf</td>" ; //单元格内的内容
newCell1.setAttribute("align","center"); //设置位置
var newCell1 = newRow.insertCell(1); //创建新单元格
newCell1.innerHTML = "<td>123</td>" ; //单元格内的内容
newCell1.setAttribute("align","center"); //设置位置
Ajax获取后台数据
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() }, 这个data是客户端传到服务器端的数据。
2、success:function(data) 这个data是服务器端返回客户端的数据
方法二：
//1. 创建ajax对象
var ajax;// createAjax();
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
ajax=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
//alert(ajax!=null?"创建ajax成功！":"创建ajax失败！！");
//2.定义调用函数
function chart() {
//3. 准备发送请求
/*
method表示发送请求的方式，例如GET或POST
url表示发送请求的目标地址
可选的boolean值
>>true：表示该请求是异步的，这是默认值，web2.0
>>false：表示该请求是同步的，web1.0
*/
var method = "GET";
<%String path = request.getContextPath();%>//获取当前路径
var url = "<%=path%>/clientTest";//交互的类
ajax.open(method, url, true);
//4. 真正发送异步请求
/*
content表示发送请求的内容，如果无内容的话，使用null表示
如果有内容，写成key=value形成，例如：username=jack&password=123
*/
var content = "111";
ajax.send(content);
//5. ajax对象监听服务器的响应
ajax.onreadystatechange = function() {
//如果ajax对象，已经完全接收到了响应，
if (ajax.readyState == 4) {
//如果响应正确
if (ajax.status == 200) {
var nowStr = JSON.parse(ajax.responseText);//转化为json对象
alert(json.name);//输出对象的name属性
或者
//定位span标签
var spanElement = document.getElementsByTagName("span")[0];
//将nowStr放当span标签内
spanElement.innerHTML = nowStr;
}
}
};
};
后台
3.发送ajax对象
SystemState systemState = new SystemState();//新建空对象
操作对象
String jsonStr = json.toString();//转化为json字符串
System.out.println(json.toString());
response.getWriter().write(jsonStr);//获取输出流对象
//通过流对象，将信息输出到AJAX对象
js中Double类型数据保留两位小数（非四舍五入）
var a = 3.346234325;
var b = parseFloat(a).toFixed(3);
var result = b.substring(0,b.toString().length - 1); //这里先将a转换为float类型再保留三位小数，最后截取字符串前b.length - 1位
document.write(result);
Echarts图表使用
smooth:false/true; //折线是否平滑
parallelAxis.type: 坐标轴类型。
可选：
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
parallelAxis.name: 坐标轴名称。
parallelAxis.nameLocation: 坐标轴名称显示位置。
可选：
'start'
'middle'
'end'
parallelAxis.nameTextStyle: 坐标轴名称的文字样式。
parallelAxis.nameGap: 坐标轴名称与轴线之间的距离。
xAxis.axisLabel.interval:坐标轴刻度标签的显示间隔，在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
xAxis.axisLabel.showMinLabel:是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）。
修改坐标轴颜色：
axisLine:{
lineStyle:{
color:'yellow',
width:8,//这里是为了突出显示加上的，可以去掉
}
}
网友评论