huic

最新推荐文章于 2015-08-18 17:02:00 发布

skipwitit

最新推荐文章于 2015-08-18 17:02:00 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/skipwitit/article/details/9108685

版权

js webview:

http://blog.csdn.net/wangtingshuai/article/details/8631835

http://blog.csdn.net/dadoneo/article/details/6233366

http://download.csdn.net/download/yunyou037/5087053

http://www.eoeandroid.com/forum.php?mod=viewthread&tid=197324

http://www.eoeandroid.com/forum.php?mod=viewthread&tid=276720

ai:http://www.zhihu.com/question/21378038/answer/18045249

http://blog.csdn.net/yangyu20121224/article/details/9016223

http://life.szonline.net/pg/by/a2653.html

<!DOCTYPE html>
<html>
<head>

<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
"
/>
<meta charset="uft-8"/>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

<LINK REL=StyleSheet HREF="jquery.mobile-1.3.0.css">

<script type="text/javascript" src="ichart.1.1.src.js"></script>

<script src="jquery-1.9.1.js"></script>

<script type="text/javascript">
var containName = 'canvasDiv';
var containName2 = 'canvasDiv2';
var sss='用户量';
var titletype='业务量';
var thevalue=[];
for(var i=0;i<12;i++){
thevalue.push(Math.floor(Math.random()*(10+((i%12)*5)))+10);
}
　$(document).ready(function()
{
initCanvas();
buildCharts(containName,titletype,thevalue);
buildCharts(containName2,titletype,thevalue);
});

function buildCharts(containName,topTitle,varSeries){
var flow=varSeries;

var text=topTitle;
var data = [
{
name : '用户量',
value:flow,
color:'#0d8ecf',
line_width:4
}
];

var labels = ["15:43","15:53","16:03","16:13","16:23","16:33"];

var line = new iChart.LineBasic2D({
render : containName,
data: data,
align:'center',
title : {
text:text,
fontsize:32,
color:'#ec4646'
},
subtitle : '访问量(单位：千)',
footnote : '',
width : 720,
height : 500,
//fit:true,
sub_option:{
smooth : true,//平滑曲线
point_size:10
},
tip:{
enable:false,
shadow:false
},
legend : {
enable : false
},
crosshair:{
enable:false,
line_color:'#62bce9'
},
coordinate:{
width:600,
valid_width:"95%",
//height:350,
axis:{
color:'#9f9f9f',
width:[0,0,4,4]
},
grids:{
vertical:{
way:'share_alike',
value:8
}
},
scale:[{
position:'left',
start_scale:0,
end_scale:80,
scale_space:10,
scale_size:2,
label : {color:'#9f9f9f',font : '微软雅黑',fontsize:28,fontweight:600},
scale_color:'#9f9f9f'
},{
position:'bottom',
label : {color:'#9f9f9f',font : '微软雅黑',fontsize:28,fontweight:600},
labels:labels
}]
}
});
//开始画图
line.draw();}

function initCanvas(){
//$.ajax({
var chartHtml = "";
chartHtml=chartHtml+"<div id=\"canvasDiv\">bbb</div><br></br>";
chartHtml=chartHtml+"<div id=\"canvasDiv2\">bbb</div>";
$('#display').html(function(){return chartHtml;});

}

</script>
<title>view </title>
</head>


<body>

<P>查看用户在线人数：</P>


<div id="display"></div>



</body>

</html>

############分割线##########

//创建highcharts图表
function buildCharts(containName,titleText,subTitleText,yTitleText,varSeries,request){

chart = new Highcharts.Chart({
chart: {
renderTo: containName,
type: 'line',
marginRight: 50,
marginBottom: 50,
backgroundColor:'#EEE',
plotBackgroundColor:'#ffffff',
shadow:'true',
events: {
load: function() {
var seriesArray = this.series;
setInterval(function(){myAddPoint(seriesArray,request);}, 5000);
}
}

},
title: {
text: titleText
},
subtitle: {
text: subTitleText
},
xAxis: {
type:"datetime",
maxPadding : 0.05,
minPadding : 0.05,
//tickInterval : 24 * 3600 * 1000 * 2,//两天画一个x刻度
//或者150px画一个x刻度，如果跟上面那个一起设置了，则以最大的间隔为准
tickPixelInterval : 150,
tickWidth:5,//刻度的宽度
lineColor : '#990000',//自定义刻度颜色
lineWidth :3,//自定义x轴宽度
gridLineWidth :1,//默认是0，即在图上没有纵轴间隔线
//自定义x刻度上显示的时间格式，根据间隔大小，
dateTimeLabelFormats:
{
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%b.%e',
week: '%b.%e',
month: '%y.%b',
year: '%Y'
}
},
yAxis: {
title: {
text: yTitleText
},
min:0
},
plotOptions: {
line: {
marker:{
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'X:'+getLocalTime(this.x) +' Y:'+ this.y;
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
borderColor:'#330033'
},
series: varSeries
});
return chart;
}

function initCanvas(containerID){
$.ajax({
type:'GET',
url:'getViewCanvas',
dataType:'json',
data:'containerID='+containerID,
cache:false,
success:function(data){
var jsonObj = eval(data);
var charts = new Array();
var chartHtml = "";
$(jsonObj).each(function(ind){
jsonInd = jsonObj[ind];
chartHtml=chartHtml+"<div id=\"divChart"+ jsonInd.viewID +"\" style=\"width:"+ jsonInd.canvasWidth +"px;height:"+ jsonInd.canvasHeight +"px\">a</div>"
});

$('#divAllView').html(function(){return chartHtml;});

$(jsonObj).each(function(ind){
jsonInd = jsonObj[ind];
yTitleText='';
//0,业务量,1,平均响应时间,2用户数,3异常量';
if(0==jsonInd.dataType){yTitleText='业务量';}
else if(1==jsonInd.dataType){yTitleText='平均响应时间';}
else if(2==jsonInd.dataType){yTitleText='用户数';}
else if(3==jsonInd.dataType){yTitleText='异常量';}

var today = new Date();
nowUnix = Date.parse(today);
todayUnix = Date.parse(today.getYear()+"/"+(today.getMonth()+1)+"/"+today.getDate());
endUnix = nowUnix - todayUnix;
beginUnix = endUnix - jsonInd.timeArea*60000;
var baselineTOF="";
if(jsonInd.isBaseline==0){baselineTOF=false;}
else{baselineTOF=true;}
//alert("nowUnix ="+nowUnix+",todayUnix ="+todayUnix+",endUnix ="+endUnix+",beginUnix ="+beginUnix);
var requestJson = "{\"type\":"+ jsonInd.dataType +",\"baselineType\":"+ jsonInd.baselineType +",\"id\":"+jsonInd.messageID+",\"baseline\":"+ baselineTOF +",\"timeunit\":1,\"timeArray\":["+beginUnix+","+endUnix+"],\"date\":["+todayUnix+"]}";
//获取数据
$.ajax({
type:'GET',
url:'getViewData',
dataType:'json',
data:'requestJson='+requestJson,
cache:false,
async:false,
success:function(data){
//$('#divChart'+jsonInd.viewID).html(function(){return chartResponseFormat(data);});
buildCharts('divChart'+jsonInd.viewID,jsonInd.viewName,jsonInd.messageID+":"+jsonInd.messageKeyWord,yTitleText,eval(chartResponseFormat(data)),requestJson);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
ajaxErrorHandler(XMLHttpRequest, textStatus, errorThrown);
}
});

});

},
error:function(XMLHttpRequest, textStatus, errorThrown) {
ajaxErrorHandler(XMLHttpRequest, textStatus, errorThrown);
}
});

%%%%%%

skipwitit

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
huic

http://blog.csdn.net/dadoneo/article/details/6233366http://download.csdn.net/download/yunyou037/5087053Exmaple content="height = [pixel_value | device-height] ,width =
复制链接

扫一扫