📄 jsgraphicshelp.htm
字号:
<!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>JSGraphicsHelp</title>
<script type="text/javascript" src="js/jsgraphics.js"></script>
<style type="text/css">
.title{font-size:30px;}
.subtitle{font-size:20px;}
.content{font-size:12px;}
.textarea{color:Green;}
textarea{color:Green;}
</style>
</head>
<body >
<span class="title">jsGraphics帮助文件</span><br />
<span class="subtitle" >一.声明</span>
<div class="content" >Any question please contact mathcn@126.com<br />
Copyright (c) mathcn@126.com All rights reserved.<br />
Created 1. 20. 2007 by mathcn in China
Last modified: 1. 20. 2007<br />
个人简介：周胜军,06年就读于大连理工计算数学研究生,研究曲面匹配,擅长网络编程asp,asp.net,c#,javascript,Dom,xml,vb,css,Ajax,dhtml......
此信息寻工作用QQ418806107
<br />
本帮助手册介绍了如何使用该jsGraphics.js库绘制图表（条形图，k曲线图，扇形图，饼形图，填充图），您可以用AJAX在后台获取数据，生成不断更新流畅的动态图表。你可以自由的复制传播修改该库，但不能用于任何商业目的。使用时画布设置不要太大。
</div>
<span class="subtitle" >二.方法</span>
<div class="content" >
<span class="content" >1.如何使用该库</span><br />
<textarea style="text-align:left;"cols="120" rows="8">
<!--
<div id="canvas" style="position:relative;width: 250px; height: 120px; background-color:#eeefff;">
<script type="text/javascript">
var jg=new jsGraphics();//使用该类
jg.setPen(20,90);//设置画笔的宽高
jg.setColor("Red");
jg.point(20,0);
jg.drawStringRect("This is first jsGraphics Test!",20,90,170,15,12,"BLue");
jg.paint("canvas");
</script>
</div>
-->
</textarea>
<div id="canvas" style="position:relative;width: 250px; height: 120px; background-color:#eeefff;">
<script type="text/javascript">
var jg=new jsGraphics();//使用该类
jg.setPen(20,90);//设置画笔的宽高
jg.setColor("Red");
jg.point(20,0);
jg.drawStringRect("This is first jsGraphics Test!",20,90,170,15,12,"BLue");
jg.paint("canvas");
</script>
</div>
<span class="content" >2.setColor()设置画笔颜色函数；setPen(w,h)设置画笔大小；point(x,y)画点函数</span><br />
<textarea id="TextArea1" cols="120" rows="3">
<!--
setColor("Red") setColor("#fffeee"); setPen(20,90); point(0,90)//在指定坐标画点
-->
</textarea>
<span class="content" >3.clear("canvasID")函数 清空画布 paint("canvasID")输出函数 </span><br />
<textarea id="TextArea2" cols="120" rows="8">
<!--
<div id="canvas1" style="position:relative;width: 250px; height: 120px; background-color:#eeefff;">
<script type="text/javascript">
var jg=new jsGraphics();//使用该类
jg.setPen(1,1);
jg.setColor("Red");
var Y=new Array;//Y值，如果Y值不在画布内，需要坐标变换将其植入画布内。
var Z=new Array;//百分比
var C=["Red","Black","Green","Gray","Yellow","#FFCF58","#6FDE8B","#987BB3"];
function pillarsp()
{
for(var i=0;i<8;i++){var r=Math.floor(100*Math.random(10));Y[i]=r;}
var sum=0;
for(var i=0;i<8;i++){ sum+=Y[i];}
for(var i=0;i<8;i++){ Z[i]=Math.ceil(100*Y[i]/sum)+"%";}
for(var i=0;i<8;i++)
{
jg.setPen(20,Y[i]);//设置画笔的宽高
jg.setColor(C[i]);
jg.point(i*30,0);
jg.drawStringRect(Z[i],i*30,Y[i],170,15,9,"BLue");
}
jg.setPen(1,1)
//jg.clear("canvas1");//如果使用该函数，先将画布清空
jg.paint("canvas1");
}
var obj1=setInterval("pillarsp()",2390);
</script>
</div>
-->
</textarea>
<div id="canvas1" style="position:relative;width: 250px; height: 120px; background-color:#eeefff;">
<script type="text/javascript">
var jg=new jsGraphics();//使用该类
jg.setPen(1,1);
jg.setColor("Red");
var Y=new Array;//Y值，如果Y值不在画布内，需要坐标变换将其植入画布内。
var Z=new Array;//百分比
var C=["Red","Black","Green","Gray","Yellow","#FFCF58","#6FDE8B","#987BB3"];
function pillarsp()
{
for(var i=0;i<8;i++){var r=Math.floor(100*Math.random(10));Y[i]=r;}
var sum=0;
for(var i=0;i<8;i++){ sum+=Y[i];}
for(var i=0;i<8;i++){ Z[i]=Math.ceil(100*Y[i]/sum)+"%";}
for(var i=0;i<8;i++)
{
jg.setPen(20,Y[i]);//设置画笔的宽高
jg.setColor(C[i]);
jg.point(i*30,0);
jg.drawStringRect(Z[i],i*30,Y[i],170,15,9,"BLue");
}
jg.setPen(1,1)
//jg.clear("canvas1");//如果使用该函数，先将画布清空
jg.paint("canvas1");
}
var obj1=setInterval("pillarsp()",2390);
</script>
</div>
<span class="content" >4.drawLine(x1,y1,x2,y2)函数 drawCurve(X,Y,a)曲线张力插值函数 drawStringRect(txt,x,y,w,h,size,ftcolor)文本函数</span><br />
<div >
drawLine(x1,y1,x2,y2)画直线函数，给定两点坐标。
<br />drawCurve(X,Y,a)X,Y为插值点的x,y坐标数组,a为张力因子，显著调节值在0.01~2之间，调节曲线弯曲程度，边界二阶导数如果需要改动可在jsGraphics.js内设置。
<br />drawStringRect(txt,x,y,w,h,size,ftcolor) txt为文本，x,y为要显示文本的坐标点，w,h为文本框的宽高，size为文本大小，ftcolor为文本颜色，不设置为黑色。
</div>
<textarea id="TextArea3" cols="120" rows="8">
<!--
<div id="canvas2" style="position:relative;width: 250px; height: 120px; background-color:#eeefff;">
<script type="text/javascript">
var jg=new jsGraphics();//使用该类
jg.setPen(1,1);
var X2=[0,30,60,90,120,150,180,210,240];
var Y2=new Array;
for(var i=0;i<9;i++){Y2[i]=0;}
function pillar()
{
var n=Math.ceil(100*Math.random());
Y2.unshift(n);
Y2.pop();
jg.setColor("#987BB3");
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("Green");
jg.drawCurve(X2,Y2,0.12);
jg.setColor("Red");
jg.setPen(2,2);
for(var i=0;i<=250;i=i+30){jg.point(i,Y2[i/30]);}//标出插值点
for(var i=0;i<=250;i=i+30){jg.drawStringRect(Y2[i/30],i,Y2[i/30],20,15,12,"BLue");}//贴文字
jg.paint("canvas2");
}
var obj22=setInterval("pillar()",3000);
</script>
</div>
-->
</textarea>
<div id="canvas2" style="position:relative;width: 250px; height: 120px; background-color:#eeefff;">
<script type="text/javascript">
var jg=new jsGraphics();//使用该类
jg.setPen(1,1);
var X2=[0,30,60,90,120,150,180,210,240];
var Y2=new Array;
for(var i=0;i<9;i++){Y2[i]=0;}
function pillar()
{
var n=Math.ceil(100*Math.random());
Y2.unshift(n);
Y2.pop();
jg.setColor("#987BB3");
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("Green");
jg.drawCurve(X2,Y2,0.12);
jg.setColor("Red");
jg.setPen(2,2);
for(var i=0;i<=250;i=i+30){jg.point(i,Y2[i/30]);}//标出插值点
for(var i=0;i<=250;i=i+30){jg.drawStringRect(Y2[i/30],i,Y2[i/30],20,15,12,"BLue");}//贴文字
jg.paint("canvas2");
}
var obj22=setInterval("pillar()",3000);
</script>
</div>
<span class="content" >5.drawPolyline(X,Y)画折线 drawPolygon(X,Y)画多边形 fillPolygon(X,Y)画填充多边形 drawEllipse(x0,y0,a,b)画椭圆或圆 fillEllipse(x0,y0,a,b)画填充椭圆或圆</span><br />
<div>
drawPolyline(X,Y) X,Y为插值点的x,y坐标数组。
<br />drawPolygon(X,Y)画多边形,X,Y为插值点的x,y坐标数组。
<br />fillPolygon(X,Y)画填充多边形 ,X,Y为插值点的x,y坐标数组。
<br />drawEllipse(x0,y0,a,b)画椭圆或圆 ,x0,y0为椭圆中心,a,b分别为两个轴长。
<br />fillEllipse(x0,y0,a,b)画椭圆或圆 ,x0,y0为椭圆中心,a,b分别为两个轴长。
</div>
<textarea id="TextArea4" cols="120" rows="8">
<!--
<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");
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -