Javascript结合VML勾画曲线图(一)

Javascript结合VML勾画曲线图(一)

VML(Vector Markup Language)
是一个最初由Microsoft开发的XML词表，现在也只有IE5.0以上版本对VML提供支持。使用VML可以在IE中绘制矢量图形，所以有人认为VML就是在IE中实现了画笔的功能。

示例
jsp文件graphicData.jsp勾画图形(根据网上的例子Y轴做了修改)
js文件是VMLCurve的javascript类vmlcurve.js(根据网上的例子Y轴的JS错误做了修复)
css是画图出来的样式定义vmlcurve.css

1. graphicData.jsp核心代码：
导入工具文件
<link rev="stylesheet" media="all" href="vmlcurve.css" type="text/css"
rel="stylesheet" />
<script type="text/javascript" src="vmlcurve.js"></script>
<script type="text/javascript" src="common.js"></script>
HTML的BODY之间留下一个DIV占位
<div align="center" id="curve1"></div>
JSP上的javascript调用工具类在DIV中画出图形
<script language="javascript">
var x_length = 1440; //X轴总点数
var x_step = 60;         //x轴多少步长显示一个数字

var y_start = <%=min%>; //后台传递过来Y轴的最小值
var y_end = <%=max%>;     //后台传递过来Y轴的最大值
var y_length = 20.000;   //Y轴显示20个格子
var y_step = 2;                 //y轴多少步长显示一个数字
var y_step_value = getPoint(accDiv(y_end-y_start,y_length * 0.9),5);
//根据最大值和最小值，20个格子计算出每格的高度

//建立曲线对象
var vc1 = new VMLCurve(document.all.curve1);

vc1.gpWidth = 900;   //DIV图线区域的宽度
vc1.gpHeight = 450; //DIV图线区域的高度
vc1.OriginYValue = y_start; //原点Y坐标
vc1.configYMinValue = y_start; //最小Y坐标

//设置X坐标值，从左至右
var configxvalue = new Array(x_length);
for ( var i = 0; i < x_length; i++) {
   if(((i + 1) % x_step) == 0){
    configxvalue[i] = (i + 1)/60;
   }else{
    configxvalue[i] = "";
   }
}
vc1.configXValue = configxvalue;

//设置Y坐标轴
var configyvalue = new Array(y_length);
var tmp = y_start;
for ( var j = 0; j < y_length; j++) {
   tmp = getPoint(tmp + y_step_value,4);
   if(((j + 1) % y_step) == 0){
    configyvalue[j] = tmp;
   }else{
    configyvalue[j] = "";
   }
}
vc1.configYValue = configyvalue;

vc1.init("vc1", "曲线图");

//用数组设置点的横纵标值及提示信息
var xvalue = new Array(x_length);
for ( var i = 0; i < x_length; i++) {
   xvalue[i] = i;
}
var xValueArr = xvalue;//X轴数据，
var yvalue = new Array(x_length);
//mins是一个float数组，从后台传递出来的Y轴的值
<%
   for (int i = 0;i<mins.length;i++){
%>
   yvalue[<%=i%>] = <%=mins[i]%>;
<%
   }
%>
var yValueArr = yvalue; //Y轴数据

var svalue = new Array(x_length);
for ( var i = 0; i < x_length; i++) {
   svalue[i] = "第" + i + "个点";
}
var sValueArr = svalue;

//设置圆点的属性
vc1.setPointsProp(1, 1, '#FF6600', '#FF6600');
vc1.setPointsValue(xValueArr,yValueArr,sValueArr);
</script>

2.js文件的所有代码如下(根据网上的例子调整了Y轴的计算)：
/* 说明: JS和VML画曲线图
* 作者：<a href="http://www.freeage.cn" target="_blank">梦想年华</a>
* 邮箱：[e-mail]
* 主页：<a href="http://www.FreeAge.cn" target="_blank">自由时代</a> [<a href="http://www.freeage.cn" target="_blank">http://www.freeage.cn</a>]
* 申明：转载，使用，修改请保存上面的版权申明
*/
function VMLCurve(objDiv){

this.objDiv = objDiv;     // obj
this.toolTips    = "";     // 提示信息
this.configXPerValue = 0;
    this.configYPerValue = 0;
    this.configXMinValue = 0;
    this.configYMinValue = 0;

this.OriginXValue = 0;     // 圆点坐标
this.OriginYValue = 0;

//定义区域参数
this.group     = null;   // v:group
this.n       = 1    // 倍数
this.gpWidth    = 700;   // Width
this.gpHeight    = 350;   // Height

this.configXTextLeft = -10;   // 定义 X轴坐标值左边离坐标距离
this.configXTextTop = 10;   // 定义 X轴坐标值上方离X轴的距离

this.configYLeft    = 60;   // 定义 Y轴距对象左边的距离
this.configYTextRight = 40;   // 定义 Y轴坐标值离Y轴右边的距离
this.configYTextBottom = 5;   // 定义 Y轴坐标值离坐标下边距离

//X轴值
this.configXValue = new Array('一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一 月','十二月');
//Y轴值
this.configYValue = new Array('100','200','300','400','500','600','700','800','900','1000');

// Init BackGround
this.Background   = null;
this.bgColor   = "#C4E1FF";   // BackGround Color

// Init ToolTip
this.configToolLeft     = 25;
this.configToolTop     = 25;
this.ToolTip       = document.createElement("DIV");
this.ToolTip.className     = "ToolTip";
this.ToolTip.id      = "ToolTip";
this.ToolTip.style.zIndex    = "100";
this.ToolTip.style.position   = "absolute";
this.ToolTip.style.display   = "none";
this.ToolTip.innerHTML    = "";

//设置点线的属性
this.PointRadius = 5;       //圆点的半径大小
this.LineSize    = 2;                  //线的大小
this.PointColor = "#FF6600";    //点的颜色
this.LineColor   = "#FF6600";    //线的颜色

this.Points = "";
this.PreviousPointY = 0;
this.PointsYCount   = 0;
}

// Init
VMLCurve.prototype.init = function(strObj,strTitle){

this.gpcX    = this.gpWidth/this.n;    // coordsize X
this.gpcY    = this.gpHeight/this.n;    // coordsize Y

this.configXLen   = this.gpWidth - this.configYLeft*2+20; // 定义 X轴长度
this.configYLen   = this.gpHeight- 100;    // 定义 Y 轴长度
this.configXNum   = this.configXValue.length;   // X轴刻度数
this.configYNum   = this.configYValue.length;   // Y轴刻度数

    this.configXTop   = this.configYLen+20;    //定义 X轴距对象上边的距离

this.configXPerLen = str2Float((this.configXLen-20)/this.configXNum,5); //定义 X轴每刻度长度
this.configYPerLen = str2Float((this.configYLen-20)/this.configYNum,5); //定义 Y轴每刻度长度


//初始化背景参数
this.bgWidth   = this.gpWidth;   // Height
this.bgHeight   = this.gpHeight; // Width

if(this.configYPerValue!=0){
        var tempArr = new Array(this.configYNum);
        for(var i=0;i<this.configYNum;i++){
        tempArr[i] = str2Float(this.configYMinValue+this.configYPerValue*i,5);
        }
        this.configYValue = tempArr;
}else {
   //alert("configYNum:" + this.configYNum);
   //alert("configYNumValue:" + this.configYValue[this.configYNum - 1]);
        this.configYPerValue = str2Float((this.configYValue[this.configYNum - 1]- this.configYMinValue)/this.configYNum,5);
        //alert(this.configYValue[this.configYNum - 1] + ":" + this.configYMinValue);
    }

   if(this.configXPerValue!=0){
        var tempArr = new Array(this.configXNum);
        for(var i=0;i<this.configXNum;i++){
        tempArr[i] = str2Float(this.configXMinValue+this.configXPerValue*i,5);
        }
        this.configXValue = tempArr;
}else{
         //this.configXPerValue = str2Float((this.configXValue(this.configXNum)- this.configXMinValue)/this.configXNum,2);
    }

    this.configYValue = this.configYValue.reverse(); //倒序数组
this.createGroup();
this.createBackgroud();
this.createCoordinate();
this.createXTableLine();

this.createYTableLine();
this.createToolTip();

this.setTitle(strTitle);
this.strObj = strObj;
}

//建立画图区域
VMLCurve.prototype.createGroup = function() {
this.group = document.createElement("<v:group ID=\"group1\" coordsize=\""+this.gpcX+","+this.gpcY+"\" style=\"z-index:-10;width:"+this.gpWidth+"px;height:"+this.gpHeight+"px\" />");
this.objDiv.insertBefore(this.group);
}

//填充背景
VMLCurve.prototype.createBackgroud = function() {
this.Background = document.createElement("<v:rect fillcolor=\"white\" strokecolor=\"black\" style=\"z- index:-8;width:"+this.bgWidth+"px;height:"+this.bgHeight+"px\" />");
this.Background.insertBefore(document.createElement("<v:fill rotate=\"t\" type=\"gradient\" color2=\""+this.bgColor+"\" />"));
this.Background.insertBefore(document.createElement("<v:shadow on=\"t\" type=\"single\" color=\"silver\" offset=\"3pt,3pt\" />"));
this.group.insertBefore(this.Background);
}

//建立坐标轴
VMLCurve.prototype.createCoordinate = function() {
var pointX1 = this.configYLeft + "," + this.configXTop;
var pointX2 = this.configYLeft+this.configXLen + "," + this.configXTop;
var pointY1 = pointX1;
var pointY2 = this.configYLeft + "," + eval(this.configXTop-this.configYLen);
this.createCoordinateLine(pointY1,pointX2);
this.createCoordinateLine(pointY1,pointY2);
this.setOriginValue(this.OriginXValue,this.OriginYValue);
}

//建立坐标线
VMLCurve.prototype.createTableLine = function(xPoint,yPoint,sTableColor){
var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\""+sTableColor+"\" style=\"Z-INDEX:8;POSITION:absolute;/>");
this.group.insertBefore(tempLine);
tempLine.insertBefore(document.createElement("<v:stroke dashstyle=\"Solid\" />"));
}

//画坐标轴线
VMLCurve.prototype.createCoordinateLine = function(xPoint,yPoint){
var tempLine = document.createElement("<v:line from=\""+xPoint+"\" to=\""+yPoint+"\" strokeColor=\"#FF6600\" strokeweight=\"1px\" style=\"Z-INDEX:8;POSITION:absolute;\"/>");
this.group.insertBefore(tempLine);
tempLine.insertBefore(document.createElement("<v:stroke EndArrow=\"classic\" />"));
}

//创建文本提示信息
VMLCurve.prototype.createText = function(xLeft,xTop,sText,sClass) {
var tempObj = document.createElement("<P class=\""+sClass+"\" style=\"Z- INDEX:8;LEFT:"+xLeft+"px;POSITION:absolute;TOP:"+xTop+"px;\"/>");
tempObj.innerHTML = sText;
this.group.insertBefore(tempObj);
}

// 创建X坐标网格线
VMLCurve.prototype.createXTableLine = function(){
var x1,y1,x2,y2,point1,point2,sTableColor;
sTableColor = "#CCCCCC";
for(var i=0;i<this.configXValue.length;i++){
   x1 = eval(this.configYLeft + this.configXPerLen*(i+1));
   y1 = eval(this.configXTop-this.configYLen)+10;
   x2 = x1;
   y2 = eval(this.configXTop+5);
   point1 = x1 + "," + y1;
   point2 = x2 + "," + y2;
    this.createTableLine(point1,point2,sTableColor);
    this.createText(x1+this.configXTextLeft,this.configXTop+this.configXTextTop,this.configXValue[i],"pBlack");
}
}

//创建Y轴坐标网格线
VMLCurve.prototype.createYTableLine = function(){
var x1,y1,x2,y2,point1,point2,sTableColor;
for(var i=0;i<this.configYValue.length;i++){
   x1 = eval(this.configYLeft - 5);
   y1 = eval(this.configXTop - this.configYPerLen*(i+1));
   x2 = eval(this.configYLeft + this.configXLen - 10);
   y2 = y1;
   point1 = x1 + "," + y1;
   point2 = x2 + "," + y2;
    if(this.configYValue[this.configYValue.length-i-1]=="C2") sTableColor="#FF9900";
   else sTableColor = "#CCCCCC";
   this.createTableLine(point1,point2,sTableColor);
   this.createText(this.configYLeft-this.configYTextRight,y1-this.configYTextBottom,this.configYValue [this.configYValue.length-i-1],"pBlack");
}
}


//设置标题
VMLCurve.prototype.setTitle = function(strTitle){
var tempObj = document.createElement("<div class=\"Title\" style=\"POSITION:absolute;Z- INDEX:9;LEFT:"+40+"px;TOP:"+(this.configXTop+40)+"px;width:"+(this.configXLen)+"px;height:"+(this.gpHeight- this.configXTop-20)+";/>");
tempObj.innerHTML = strTitle;
this.group.insertBefore(tempObj);
}

// 画圆点坐标
VMLCurve.prototype.setOriginValue = function(x,y){
this.createText(this.configYLeft+this.configXTextLeft,this.configXTop+this.configXTextTop,x,"pBlack");
this.createText(this.configYLeft-this.configYTextRight,this.configXTop-this.configYTextBottom,y,"pBlack");
}


// 设置圆点坐标属性
VMLCurve.prototype.setPointsProp = function(sPointRadius,sLineSize,sPointColor,sLineColor){
//alert(sPointRadius);
this.PointRadius = sPointRadius;    //圆点的半径大小
this.LineSize    = sLineSize;          //线的大小
this.PointColor = sPointColor;    //点的颜色
this.LineColor   = sLineColor;    //线的颜色
}


// 设置纵坐标的值
VMLCurve.prototype.setPointsValue = function(xValueArr,yValueArr,sValueArr){
    var sValue = "";
    var xValue = 0;
var yValue = 0;
var tempLen = 0;
var thisX   = 0;
var thisY   = 0;
var tempX   = 0;
    var tempY   = 0;
for(var i=0;i<xValueArr.length;i++){
        thisX   = str2Float(xValueArr[i],5);
        thisY   = str2Float(yValueArr[i],5);
        sValue = sValueArr[i];
        //tempX   = str2Float((thisX - this.OriginXValue)/this.configXPerValue,5);
        //alert(this.configYPerValue);
   tempY   = str2Float((thisY - this.OriginYValue)/this.configYPerValue,5);
   xValue = str2Float(this.configYLeft + str2Float(thisX*this.configXPerLen,5),5);
 
   //alert(thisY + ":" + this.OriginYValue + ":" + this.configYPerValue);
   //alert((thisY - this.OriginYValue) + ":" + this.configYPerValue);
   yValue = str2Float(this.configXTop - str2Float(tempY * this.configYPerLen,5),5);
   sValue += "<br>坐标值[X,Y]:[" + xValue + "," + yValue + "]";
   sValue += "<br>实际值[X,Y]:[" + thisX + "," + thisY + "]";
        //this.PointsYCount += str2Float(yValueArr[i],2);
   //this.PreviousPointY = yValueArr[i]; 
   this.Points = this.Points + xValue + "," + yValue + " ";
   this.createPoint(xValue,yValue,sValue);
}
this.createCurveLine();
this.PreviousPointY = 0;
this.Points         = 0;
this.PointsYCount   = 0;
}


// create Point
VMLCurve.prototype.createPoint = function(sLeft,sTop,sText){
//根据圆点的坐标,得到左上方点的坐标
var xLeft = sLeft - this.PointRadius;
var xTop   = sTop - this.PointRadius;
//alert(2*this.PointRadius);
var tempOval = document.createElement("<v:oval style=\"POSITION:absolute;Z- INDEX:12;LEFT:"+xLeft+"px;TOP:"+xTop+"px;width:"+2*this.PointRadius+";height:"+2*this.PointRadius+";cursor:hand;\" stroked=\"f\" fillcolor=\""+this.PointColor+"\" strokeweight=\"1px\" onmousemove=\""+this.strObj+".setToolTip ('block','" + sText + "'," + sLeft + "," + sTop + ");\" onmouseout=\""+this.strObj+".setToolTip('none','');\"/>");
//var tempOval = document.createElement("<v:oval style=\"POSITION:absolute;Z- INDEX:12;LEFT:"+xLeft+"px;TOP:"+xTop+"px;width:0.1px;height:0.1px;cursor:hand;\" stroked=\"f\" fillcolor=\""+this.PointColor+"\" strokeweight=\"1px\" onmousemove=\""+this.strObj+".setToolTip('block','" + sText + "'," + sLeft + "," + sTop + ");\" onmouseout=\""+this.strObj+".setToolTip('none','');\"/>");
group1.insertBefore(tempOval);
}

//以两点为坐标画线
VMLCurve.prototype.createCurveLine = function(){
var tempLine = document.createElement("<v:PolyLine Points=\""+ this.Points +"\" style=\"Z- INDEX:11;POSITION:absolute;\" strokeweight=\"2px\" filled=\"f\" />");
var newStroke = document.createElement("<v:stroke dashstyle='solid' color='"+this.LineColor+"'/>");
group1.insertBefore(tempLine);
tempLine.insertBefore(newStroke);
}


VMLCurve.prototype.createToolTip = function(){
this.group.insertBefore(this.ToolTip);
}

VMLCurve.prototype.setToolTip = function(sVisitable,sContent,x,y){
this.ToolTip.style.pixelLeft = x + this.configToolLeft;
this.ToolTip.style.pixelTop   = y + this.configToolTop;
this.ToolTip.style.display   = sVisitable;
if(this.ToolTip.innerHTML==""){
   this.ToolTip.innerHTML = sContent;
}
if(sContent==""){
   this.ToolTip.innerHTML = "";
}
}


/*以下代码来自网络,主要功能是对数字进行格式化
*原作者不详，敬请谅解。
*/
/*********************************
* 字符串转换为数字(""-->0)as_type--str,num
* 参数说明:
as_str--转换的字符串
ai_digit--转换的小数位数(null--不限制小数位数,0--转换为整型,>0按小数位数转换)
as_type--转换后返回的类型(null,"num"--转换为数字类型,"str"--转换为字符串
(按小数格式化后的字符串)
* 例如:
* str2float("10.2124568795")返回float类型10.2124568795
* str2float("10.6",0)返回Int类型11(使用四舍五入的方法)
* str2float("10.2",2)返回float类型10.1
* str2float("10.2",2,"str")返回String类型"10.20"(按小数位数格式化字符串)
* str2float("10.216",2)返回float类型10.22
* str2float("10.216",2,"str")返回String类型"10.22"
*********************************
*/
function str2Float(as_str,ai_digit,as_type)
{
   var fdb_tmp = 0;
   var fi_digit = 0;
   var fs_digit = "1";
   var fs_str = "" + as_str;
   var fs_tmp1 = "";
   var fs_tmp2 = "";
   var fi_pos = 0;
   var fi_len = 0;
   fdb_tmp = parseFloat(isNaN(parseFloat(fs_str))?0:fs_str);
  
   switch (true)
   {
   case (ai_digit==null):       //不改变值,只转换为数字
   fdb_tmp = fdb_tmp;
   break;
   case (ai_digit==0):          //取得整数
   fdb_tmp = Math.round(fdb_tmp);
   break;
   case (ai_digit>0):            //按照传入的小数点位数四舍五入取值
   for (var i=0;i<ai_digit;i++) fs_digit +="0";
   fi_digit = parseInt(fs_digit);
   fdb_tmp = Math.round(fdb_tmp * fi_digit) / fi_digit;
   if (as_type=="str")
   {
    fs_tmp1 = fdb_tmp.toString();
    fs_tmp1 +=((fs_tmp1.indexOf(".")!=-1)?"":".") + fs_digit.substr(1);
    fi_pos = fs_tmp1.indexOf(".") + 1 + ai_digit;
    fdb_tmp = fs_tmp1.substr(0,fi_pos);
   }
   break;
   }
   return fdb_tmp;
}