vml 折线图

wfdoublext

浏览: 129821 次
性别:
来自: 青岛

最近访客更多访客>>

梁静茹的小三

parrywang

影子yingzi

a418040445

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

other

VC++prototype Office CSS JavaScript

<HTML xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>曲线</title>
<link rev="stylesheet" media="all" href="VMLCurve.css" type="text/css" rel="stylesheet" />
<script language="javascript">
<!--
/* 说明: JS和VML画曲线图
* 作者：<a href="http://www.freeage.cn" target="_blank">梦想年华</a>
* 邮箱：fanwsp@126.com
* 主页：<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    = 15;
this.configToolTop    = 15;
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,2); //定义 X轴每刻度长度
this.configYPerLen = str2Float((this.configYLen-20)/this.configYNum,2); //定义 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,2);
        }
        this.configYValue = tempArr;
}
    else {
        this.configYPerValue = str2Float((this.configYValue(this.configYNum)-this.configYMinValue)/this.configYNum,2);
    }

   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,2);
        }
        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){
PointRadius = sPointRadius;   //圆点的半径大小
LineSize    = sLineSize;          //线的大小
PointColor = sPointColor;   //点的颜色
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],2);
        thisY   = str2Float(yValueArr[i],2);
        sValue = sValueArr[i];
        //tempX   = str2Float((thisX - this.OriginXValue)/this.configXPerValue,2);
  tempY   = str2Float((thisY - this.OriginYValue)/this.configYPerValue,2);
  xValue = str2Float(this.configYLeft + str2Float(thisX*this.configXPerLen,2),2);
  yValue = str2Float(this.configXTop - str2Float(tempY*this.configYPerLen,2),2);
  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;
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','');\"/>");
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;
}
//-->
</script>

.pBlack {
font-weight:bold;
font-size:12px;
}

.pRed {
font-weight:bold;
font-size:12px;
color:#FF0000;
}

/*横坐标轴样式*/
.pMonth {
font-size:66px;
font-family:"黑体";
color:#CCCCCC;
letter-spacing: 3px;
}

/*提示信息样式*/
.ToolTip {
padding:4px;
margin:4px;
background-color: #CCCCCC;
border: 1px solid #0066FF;
text-align:left;
}

/*标题显示样式*/
.Title {
font-family:"宋体", "华文仿宋";
font-size:16px;
text-align:center;
font-weight:bold;
color:#996600;
vertical-align:middle;
}

.curveBody{
margin:0;
padding:0;
height:20px;
font-size:12px;
}

.curveForm{
margin:0;
padding:0;
height:20px;
font-size:12px;
}
-->
</style>
</head>

二月');

//设置Y坐标轴
vc.configYPerValue = 100;
vc.configYMinValue = 100;
//vc.configYValue = new Array(100,200,300,400,500,600,700,800,900,1000);
vc.init("vc","曲线图");

//用数组设置点的横纵标值及提示信息
var xValueArr = new Array(1,2,3,4,5,6,7,8,9,10,11,11.5); //X轴数据，
var yValueArr = new Array(320,280,420,550,600,700,800,720,190,940,590,1000); //Y轴数据
var sValueArr = new Array('第1个点','第2个点','第3个点','第4个点','第5个点','第6个点','第7个点','第8个点','第9

个点','第10个点','第11个点','第12个点'); //提示信息
//设置圆点的属性
vc.setPointsProp(5,1,'#FF6600','#FF6600');
vc.setPointsValue(xValueArr,yValueArr,sValueArr);
</script>
</body>
</html>

分享到：

vml 饼图 | web。config

2008-07-01 16:57
浏览 2023
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

vml 折线图

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

vml 折线图

评论

发表评论

相关推荐

兼容模式设置

google地图图标

iefav

fsda

book

SQLdll

xml验证 转载

内部排序算法

tree

iframe 父子窗体调用

table行列固定

DHtml

group box

vml 饼图

vml资料

前台图片效果

锚点是什么？

webchart作图

vml圆角，箭头（IE）

最近访客更多访客>>

xml验证转载