📄 jsgraphicshelp.htm
字号:
jg.drawPolygon(X,Y);
var X=[20,40,60,70];
var Y=[29,46,29,90];
jg.setColor("Red");
jg.fillPolygon(X,Y);
jg.drawEllipse(320,40,60,90);
jg.fillEllipse(190,40,30,40);
jg.paint("canvas3");
</script>
</div>
-->
</textarea>
<div id="canvas3" style="position:relative;width: 250px; height: 120px; background-color:#eeefff;">
<script type="text/javascript">
var jg=new jsGraphics();//使用该类
jg.setPen(1,1);
jg.setColor("Green");
var X=[0,30,60,90,120,150,180,210,240];
var Y=[89,56,79,90,120,30,56,89,90];
jg.drawPolyline(X,Y);
var X=[150,180,210,240];
var Y=[89,56,79,90];
jg.setColor("Red");
jg.drawPolygon(X,Y);
var X=[20,40,60,70];
var Y=[29,46,29,90];
jg.setColor("Red");
jg.fillPolygon(X,Y);
jg.drawEllipse(320,40,60,90);
jg.fillEllipse(190,40,30,40);
jg.paint("canvas3");
</script>
</div>
<span class="content" >6.pie(x0,y0,r,a,b)画扇形 pieChart(x0,y0,r,p,X,Color)画饼形图</span><br />
<div >
pie(x0,y0,r,a,b)画扇形，x0,y0为中心点，r为半径，a,b为起始和结束角度。[-360~360]
<br />pieChart(x0,y0,r,p,X,Color)画饼形图，x0,y0为中心点，r为半径，p>=0为离散程度，X为数据，Color为数组存储颜色，为不同的扇形涂不同的颜色。
</div>
<textarea id="TextArea5" cols="120" rows="8">
<!--
<div id="canvas" style="position:absolute;width: 300px; height: 160px; left: 346px; top: 62px; background-color:#ffffff;">
<script type="text/javascript">
var jg=new jsGraphics();
jg.setPen(1,1);
jg.setColor("Black");
var Color=["Red","Blue","Black","Green","Red","Blue"];
var Z=new Array;
for(var i=0;i<6;i++){Z[i]=Math.ceil(100*Math.random());}
jg.pieChart(0,0,90,0,Z,Color);
jg.pieChart(190,0,90,3,Z,Color);
jg.paint("canvas");
</script>
</div>
-->
</textarea>
<div id="canvas4" style="position:relative;width: 250px; height: 120px; background-color:#eeefff;">
<script type="text/javascript">
var jg=new jsGraphics();
jg.setPen(1,1);
jg.setColor("Black");
var Color=["Red","Blue","Black","Green","Red","Blue"];
var Z=new Array;
for(var i=0;i<6;i++){Z[i]=Math.ceil(100*Math.random());}
jg.pieChart(90,0,90,0,Z,Color);
jg.pieChart(290,0,90,3,Z,Color);
jg.paint("canvas4");
</script>
</div>
<br /> <br /> <br /> <br /> <br /> <br /> <br />
<span class="content" >7.ajax实现动态图表绘制示例</span><br />
<textarea id="TextArea5" cols="120" rows="20">
<!---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ajax动态绘图</title>
<script type="text/javascript" src="js/jsgraphics.js"></script>
</head>
<body>
<div id="canvas" style="position:relative;width: 250px; height: 120px; left: 213px; top: 105px;">
<script type="text/javascript">
var xmlHttp;
var handlerType=1;//通过判断该值识别用哪一个handler函数
var My=1,n=0; //My存放获取数据的最大值,n为当前获取的数据
var Data=new Array; //存放获取的数据
for(var i=0;i<9;i++){Data[i]=0;} //初始值为0
function createXMLHttpRequest()//建立异步交互对象
{
if (window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); }
}
function doRequest(url,handlertype,params,HttpMethod) //执行请求
{
handlerType=handlertype;
if(!HttpMethod) { HttpMethod="POST"; }//如果没有指定方法，默认为post
createXMLHttpRequest(); //xmlHttpRequest建立对象
if(xmlHttp)
{
xmlHttp.open(HttpMethod,url,true);
xmlHttp.onreadystatechange =handler; //获取服务器端响应后handler函数做出反应
xmlHttp.send(params);
}
}
function handler()//根据handlerType的值做出不同反应
{
if(handlerType==1) {handlerOne();}
}
var url="response.aspx?"+"timeStamp="+new Date().getTime();//timeStamp防止浏览器缓冲
function handlerOne()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var temp=xmlHttp.responseText;
Data.unshift(temp);
Data.pop();
My=Max_value(Data);
n=80*temp/My; //坐标变换 将数据压缩到指定画布大小内
}
}
}
function Max_value(arry) //返回数组最大值
{
var temp=0;
for(var i=0;i<arry.length;i++) { if(temp<arry[i]){temp=arry[i];} }
return temp;
}
var jg=new jsGraphics();//使用脚本绘图函数
var X=[0,30,60,90,120,150,180,210,240];
var Y=new Array; //存放已经被压缩了的数据，便于在画布内显示
for(var i=0;i<9;i++){Y[i]=0;} //初始值为0
function pillar()
{
doRequest(url,"1",null,"POST");//执行请求
Y.unshift(n);
Y.pop();
jg.setPen(1,1);
jg.setColor("#C1C1C1");
for(var i=0;i<=120;i=i+10){ jg.drawLine(0,i,250,i);}//画坐标线
for(var i=0;i<=250;i=i+10){ jg.drawLine(i,0,i,120);}//画坐标线
jg.setColor("RED");
jg.drawCurve(X,Y,0.2);
jg.setColor("Blue");
jg.setPen(2,2);
for(var i=0;i<=250;i=i+30){jg.point(i,Y[i/30]);}//标出插值点
//标出数据
for(var i=0;i<=250;i=i+30){jg.drawStringRect(Data[i/30],i,Y[i/30],30,15,12,"Blue");}
jg.drawStringRect("可用内存(MB)",10,100,80,15,12,"Green");//标出文字说明
jg.paint("canvas");
}
pillar();
var obj22=setInterval("pillar()",3000);
</script>
</div>
</body>
</html>
*以上代码均在visual studio 2005 环境下测试通过
以下是服务器端response.aspx代码。C#实现，使用了Diagnostics类，作为响应，每次把读取的可用内存传出。
Response.asp.cs代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Diagnostics;
public partial class response : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
PerformanceCounter myMemory = new PerformanceCounter();
myMemory.CategoryName = "Memory";
myMemory.CounterName = "Available MBytes";
float Result = myMemory.NextValue();
Response.Clear();
Response.ContentType = "text/html";
Response.Charset = "UTF-8";
Response.Write(Result.ToString());
}
}
--->
</textarea>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -