面向对象方法,js画ABC分析图一例!

李欣欣1981 2003-08-19 10:43:53
//lxx.js

var Vmax = 300;//Graph Vertical Max value;
var Hmax = 500;//Graph Horizontal Max value;
var arrGoodsNum;
var arrGoodsQty;
var arrPixsX;//arrGoodsNum has been enlarged.
var arrK;
var arrB;
var arrColor;
var arrLen;//length of arrGoodsQty...
var leftMargin;//left margin, to display YScale.
var YScaleNum;

//Coordinate is DiKarl.
function Graph(){
this.prepareData = _prepareData;
this.prepareKB = _prepareKB;
this.drawDot = _drawDot;
this.drawLine = _drawLine;
this.drawABC = _drawABC;
this.drawString = _drawString;
this.setBackGround = _setBackGround;
this.setYScale = _setYScale;
}
function _drawDot(x,y,color){
str = "<span "+ "style='position:absolute;left:"+x+";top:"+y+";height:1;width:1;font-size:1px;background-color:"+color+"'></span>";
document.write(str);
}
function _drawLine(x1,y1,x2,y2,color){
var str="";
if (x1 == x2){ //draw vertical line
x1 += leftMargin;
lineLen = y2 - y1;
lineTop = Vmax - y2;
str = "<p "+ "style='position:absolute;left:"+x1+";top:"+lineTop+";height:"+lineLen+";width:1;font-size:1;background-color:"+color+"'></p>";
}else if (y1==y2){ //draw horizontal line
lineLen = x2 - x1;
lineTop = Vmax - y2;
x1 += leftMargin;
str = "<p "+ "style='position:absolute;left:"+x1+";top:"+lineTop+";height:1;width:"+lineLen+";font-size:1;background-color:"+color+"'></p>";
}else{
}
document.write(str);
}
function _drawABC(){
for (var i=0;i<Hmax ;i++ ){
if ( i<arrPixsX[1] ){
y = arrK[0]*i+Number(arrB[0]);
color = arrColor[0];
}else if ( (i>arrPixsX[1])&&(i<arrPixsX[2]) ){
y = arrK[1]*i+Number(arrB[1]);
color = arrColor[1];
}else if ( (i>arrPixsX[2])&&(i<arrPixsX[3]) ){
y = arrK[2]*i+Number(arrB[2]);
color = arrColor[2];
}else if ( (i>arrPixsX[3])&&(i<arrPixsX[4]) ){
y = arrK[3]*i+Number(arrB[3]);
color = arrColor[3];
}else if ( (i>arrPixsX[4])&&(i<arrPixsX[5]) ){
y = arrK[4]*i+Number(arrB[4]);
color = arrColor[4];
}
this.drawLine(i,0,i,y,color);
//i++;
}
}
function _drawString(strVal,x,y,color){
y = Vmax - y;
var str = "<input type='text' value='"+ strVal + "' style='border:0;background:translate;position:absolute;text-align:right;width:"+leftMargin+";left:"+x+";top:"+y+";font-size:12;color:"+color+"'>";
document.write(str);
}
function _setBackGround(Hsplit,Vsplit,color){
Hpixs = Math.round(Hmax/Hsplit);
Vpixs = Math.round(Vmax/Vsplit);
for (var i=1;i<=Hsplit ;i++ )//draw vertical line
{
this.drawLine(i*Hpixs,0,i*Hpixs,Vmax,color);
}

for (var i=1;i<=Vsplit ;i++ )//draw horizontal line
{
this.drawLine(0,i*Vpixs,Hmax,i*Vpixs,color);
}
this.drawLine(0,0,Hmax+50,0,"black");
this.drawLine(0,0,0,Vmax+20,"black");
}

function _prepareData(){
arrGoodsNum = new Array(2,3,3,2,10);
arrGoodsQty = new Array(150,200,230,280,290);
arrColor = new Array("red","green","blue","yellow","pink");
arrLen = arrGoodsNum.length;
leftMargin = 100;
YScaleNum = 5;
this.prepareKB();
}
function _prepareKB(){
arrTempX = new Array();//This array is X Axis quantity. Has been enlarged by Goods Number.[0] is 0.
arrTempY = new Array();//This array is Y Axis quantity. From [1] to end copy from arrGoodsQty.[0] is 0.
arrTempX[0] = 0;
arrTempY[0] = 0;
for (var i=0;i<arrLen ;i++ ){
arrTempY[i+1] = arrGoodsQty[i];
}

numTotal = 0;
for (var i=0;i<arrLen ;i++ ){
numTotal += arrGoodsNum[i];
}
numPixs = Math.round(Hmax/numTotal);
for (var i=0;i<arrLen ;i++ ){
temp = 0;
for (var j=0;j<i+1 ;j++ )
{
temp += arrGoodsNum[j];
}
arrTempX[i+1] = temp;
}
for (var i=0;i<arrLen ;i++ ){
arrTempX[i+1] = arrTempX[i+1]*numPixs;
}//arrTempX prepared end.
alert(arrTempX[2]);

//calculate the coefficients:
arrK = new Array();
arrB = new Array();
for (var i=0;i<arrLen ;i++ ){
arrK[i] = (arrTempY[i+1]-arrTempY[i])/(arrTempX[i+1]-arrTempX[i]);
arrB[i] = arrTempY[i]-arrK[i]*arrTempX[i];
// alert(arrK[i]);
// alert(arrB[i]);
}
arrPixsX = new Array();
arrPixsX = arrTempX;
}
function _setYScale(){
var QtyMax;
var YQtyMax;
var tempYMax = 1;
var tempYQty = 0;
var tempYScale = 0;
QtyMax = arrGoodsQty[arrGoodsQty.length-1] + "";//turn to string, to calculate QtyMax's length;

for (var i=1;i<QtyMax.length ;i++ ){
tempYMax = tempYMax * 10;
}
YQtyMax = Math.ceil(QtyMax/tempYMax)*tempYMax;
tempYQty = Math.round(YQtyMax/YScaleNum);
tempYScale = Math.round(Vmax/YScaleNum);
alert(tempYQty);
for (var i=1;i<6 ;i++ ){
this.drawString(i*tempYQty,0,tempYScale*i,"black");
}
}
...全文
83 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
smallrole 2004-03-03
  • 打赏
  • 举报
回复
好贴
wanghr100 2004-03-03
  • 打赏
  • 举报
回复
支持,学习 :)
Gorgee 2004-03-02
  • 打赏
  • 举报
回复
这么好的帖子一定要顶!
李欣欣1981 2003-08-19
  • 打赏
  • 举报
回复
//jschart.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script src="lxx.js"></script>
<script language="JavaScript">

</script>
<BODY onload="">
<div id="divG" style="position:absolute;top:100;left:50">
<script>
var g = new Graph();
g.prepareData();
g.setBackGround(20,10,"#b0b0b0");
g.drawABC();
g.setYScale();
</script>
</div>
</BODY>
</HTML>

87,899

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧