随笔- 14 文章- 0 评论- 11 阅读- 18179

废话不多说，亮点就是内置滚动条，数据大了也没问题。

代码

/*****************************************************************************************************************
*版本：2D或者3D柱状统计图
*日期：2010.2.13
*作者：孙晓玮
*联系方式：454084563@qq.com
*说明：用VML实现柱状统计图
*目前对高精度数据支持较差
*****************************************************************************************************************/
//画3D柱状图
//参数含义(唯一性ID，数据源数组，图表的宽度，图表的高度,图表标题，X轴单位，Y轴单位)
function RectChart3D(pContainerId,pWidth,pHeight,bg,shadow,hasAss)
{
    this.width = pWidth||500;//设置图表宽度、高度
    this.height = pHeight||300;
    this.bgColor = bg||'#9cf';//设置背景颜色
    this.hasShadow = shadow||false;//设置有无阴影
    this.hasAssxLine = hasAss||false;//有无坐标辅助线
    this.WarnLineNum = 0;//警示线个数
    /////////////////////////////实现scroll
    var outContainer = document.getElementById(pContainerId);
    this.container = document.createElement("<div id='" + pContainerId + "_innerDiv' style='position:absolute;left:0px;top:0px;width:"+this.width+"px;height:"+this.height+"px;overflow:auto;border:1px solid gray;'></div>");
    outContainer.appendChild(this.container);
    ///////////////////////////////////////////////
    this.XLength = 15500;//x轴有效范围
    this.YLength = 14500;
    this.cordSizeX = 20000;
    this.dataArray = new Array();//数据数组
    this.lableArray = new Array();//长度为dataArray长度
    this.titleArray = new Array();//长度为nSeries
    this.nSeries = 1;//每组数据的柱子个数
    this.rectWidth = 1000;//每个柱子宽度
    this.recd_Dx = 1000;//默认每组数据间距
    //默认颜色列表
    this.defaultColor=new Array("#CC33CC","#FFCC00","#33FF33","#3300CC","33CCFF","#FF6600","#663366","#FF0000","#33CCCC","#990099","#CCFF66","009933","996600","#FF66FF","#003300","#Yellow","#Lime","Navy","#Blue");
    //设置标题及其属性（字体大小，颜色）
    this.CaptionAtt = {
        value:'',
        fontSize:18,
        fontColor:'#6633FF'
    };
    //设置y轴颜色及其其他属性，最小值，最大值，数据精度（小数位数），单位，坐标以及其属性（字体大小，颜色）
    this.yAxisAtt = {
        minValue:0,
        maxValue:0,
        precision:0,
        color:'#000000',
        weight:1,
        unit:'',
        fontSize:7,
        fontColor:'#000000'
    }
    //设置x轴颜色及其其他属性，单位，单位以及其属性（字体大小，颜色）
    this.xAxisAtt = {
        color:'#000000',
        weight:1,
        unit:'',
        fontSize:7,
        fontColor:'#000000'
    }
     //设置横向坐标辅助线属性
    this.xAssLineAtt = {
        color:'#0099FF',
        weight:0.5,
        type:'shortdot'
    }
}
/////////////////////////////////////////////////////////
/////属性设置接口
////////////////////////////////////////////////////////
//设置标题属性
RectChart3D.prototype.SetCaptionAtt = function(value,fs,fc)
{
    this.CaptionAtt.value = value;
    this.CaptionAtt.fontSize = (fs==null?20:fs);
    this.CaptionAtt.fontColor = (fc==null?'#6633FF':fc);
}
/////////////////////////////////////////////////
//设置y轴颜色及其其他属性，最小值，最大值，数据精度（小数位数），单位，颜色，粗细，字体大小，字体颜色
RectChart3D.prototype.SetyAxisAtt = function(min,max,pre,u,c,w,fs,fc)
{
    this.yAxisAtt.minValue = min;
    this.yAxisAtt.maxValue = max;
    this.yAxisAtt.precision = pre;
    this.yAxisAtt.unit = u;
    this.yAxisAtt.weight = (w==null?1:w);//w||1;
    this.yAxisAtt.color = (c==null?'#000000':c);//c||;
    this.yAxisAtt.fontSize = (fs==null?7:fs);//fs||7;
    this.yAxisAtt.fontColor = (fc==null?'#000000':fc);//fc||;
}
/////////////////////////////////////////////////
//设置x轴颜色及其其他属性，单位，单位以及其属性（字体大小，颜色）
RectChart3D.prototype.SetxAxisAtt = function(u,fs,c,fc,w)
{
    this.xAxisAtt.unit = u;
    this.xAxisAtt.weight = (w==null?1:w);//w||1;
    this.xAxisAtt.color = (c==null?'#000000':c);//c||'#000000';
    this.xAxisAtt.fontSize = (fs==null?7:fs);//fs||7;
    this.xAxisAtt.fontColor = (fc==null?'#000000':fc);//fc||'#000000';
}
/////////////////////////////////////////////////
//设置横向坐标辅助线属性
RectChart3D.prototype.SetxAssLineAtt = function(c,w,t)
{
    this.xAssLineAtt.color = (c==null?'#0099FF':c);//c||'#0099FF';
    this.xAssLineAtt.weight = (w==null?0.5:w);//w||0.5;
    this.xAssLineAtt.type = (t==null?'shortdot':t);//t||'shortdot';
}
/////////////////////////////////////////////////
//添加警示线，设置警示线属性，以及警示线提示text
RectChart3D.prototype.AddWarnLine = function(l,tip,c,w,ty)//位置,颜色，粗细，类型，鼠标提示（虚线，实线等dot,dash,dashdot,shortdot,shortdash）
{
     var dY = (this.yAxisAtt.maxValue-this.yAxisAtt.minValue)/this.YLength;
     var beginY = this.yAxisAtt.minValue;
     var beginX = 1400;
     var location = 18000-(l-beginY)/dY;//实际坐标转换为屏幕坐标
     var color = (c==null?'red':c);//
     var weight =(w==null?1:w);//
     var type = (ty==null?'solid':ty);
     var tips = (tip==null?'':tip);
     var mouseEvent = "title='"+tips+":"+xRound(l,this.yAxisAtt.precision)+"'onmouseover='mouseover(\""+this.container.id+"_WarnLine_"+this.WarnLineNum+"\",\""+weight+"\")'onmouseout='mouseout(\""+this.container.id+"_WarnLine_"+this.WarnLineNum+"\",\""+weight+"\")'";
     var line = document.createElement("<v:line id='"+this.container.id+"_WarnLine_"+this.WarnLineNum+"' "+mouseEvent+" from='1400,"+location+"' to='18200,"+location+"' style='z-index:2'strokeWeight="+weight+"pt strokecolor='"+color+"'></v:line>");
     line.innerHTML = "<v:Stroke dashstyle='"+type+"'/>";
     this.warnLineCanvas.appendChild(line);
     this.WarnLineNum++;//警示线个数，用于设置ID
}
RectChart3D.prototype.SetData = function(datas,titles,series,lables,rectwidth)//数据数组，维数应该是series，每隔柱子宽度
{
    this.dataArray = datas;
    this.titleArray = titles;
    this.lableArray = lables;
    this.nSeries = series||1;
    this.rectWidth =  rectwidth||1000;//默认值
    /////////////////////////////实现scroll 核心思想//////////////////////////
    /////根据数据动态改变canvas的cordsize
    /////////////////////////////////////////////////////////////////////////
    var tmp = 5000+datas.length*this.nSeries*this.rectWidth+(datas.length-1)*this.recd_Dx;
    if (tmp>20000)this.cordSizeX = tmp;
    this.XLength = this.cordSizeX-4500;//x轴有效范围
    this.YLength = 14500;
}
//////画框架
RectChart3D.prototype.Draw = function()//显示空白图
{
     //创建画布内置坐标范围20000，20000///////////////////////////////////////////////////////////
    this.canvas=document.createElement("<v:group id='" + this.container.id + "_Canvas' style='position:absolute;left:0px;top:0px;width:"+this.cordSizeX/40+"px;height:"+(this.height-20)+"px;'coordsize = '"+this.cordSizeX+",20000'></v:group>");
    var shapeType = document.createElement("<v:shapetype id='" + this.container.id + "_Box' coordsize='21600,21600' o:spt='16' adj='6000'></v:shapetype>");//adj立体前后宽度
    //大背景/////////
    var background = document.createElement("<v:rect id='"  + this.container.id + "_background' style='position:absolute;left:0px;top:0px;width:"+this.cordSizeX+"px;height:20000px;' fillcolor='#EFEFEF'stroked='f' strokecolor='gray'></v:rect>");
    if (this.hasShadow){
          background.appendChild(document.createElement("<v:shadow on='t' type='single' color='silver' offset='4pt,4pt'/>"));
     }
    this.canvas.appendChild(background);
    this.canvas.appendChild(shapeType);
    //标题///////////////////////////////////////////////////////////
    var caption=document.createElement("v:rect");
    caption.style.position='relative';
    caption.style.top='200px';
    caption.style.left='0px';
    caption.style.width=this.cordSizeX+'px';
    caption.style.height='1500px';
    caption.filled='f';
    caption.stroked='false';
    var captiontext=document.createElement("v:TextBox");
    captiontext.inset='0pt,0pt,0pt,0pt';
    var ctdiv = document.createElement("<div style='FONT-SIZE:"+this.CaptionAtt.fontSize+"px;COLOR:"+this.CaptionAtt.fontColor+";WORD-BREAK;FONT-FAMILY:黑体;vertical-align:middle; text-align:center;'></div>");
    ctdiv.innerHTML = this.CaptionAtt.value;
    captiontext.appendChild(ctdiv);
    caption.appendChild(captiontext);
    this.canvas.appendChild(caption);//alert(this.canvas.style.height);
    //背景与箭头
    var back = document.createElement("<v:rect id='" + this.container.id + "_back' style='position:absolute;left:2000px;top:3000px;width:"+(this.cordSizeX-4000)+"px; height:14500px;' fillcolor='#9cf' strokecolor='#DFDFDF'></v:rect>");
    back.innerHTML = "<v:fill rotate='t' angle='-45' focus='100%' type='gradient'/>";
    this.canvas.appendChild(back);
    var XXX = document.createElement("<v:line ID='" + this.container.id + "_X' from='2000,17500' to='"+(this.cordSizeX-1000)+",17500' style='z-index:2' strokecolor='#000000' strokeWeight=1pt></v:line>");//
    XXX.innerHTML = "<v:stroke EndArrow='Classic'/>";
    var YYY = document.createElement("<v:line ID='" + this.container.id + "_Y' from='2000,17500' to='2000,2000' style='z-index:2' strokecolor='#000000' strokeWeight=1pt></v:line>");
    YYY.innerHTML = "<v:stroke EndArrow='Classic'/>";
    this.canvas.appendChild(XXX);
    this.canvas.appendChild(YYY);
    //X轴与Y轴的单位
    var XXXunit = document.createElement("<v:Rect style='position:absolute;left:300px;top:1300px;width:1500px;height:1000px' fillcolor='red' filled = 'f' stroked='false'></v:Rect>");
    XXXunit.innerHTML = "<v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div style='vertical-align:middle; text-align:right;'>"+this.yAxisAtt.unit+"</div></v:TextBox>";
    var YYYunit = document.createElement("<v:Rect style='position:absolute;left:"+(this.cordSizeX-1500)+"px;top:18200px;width:1400px;height:1000px'fillcolor='red' filled = 'f' stroked='false'></v:Rect>");
    YYYunit.innerHTML = "<v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'><div style='vertical-align:middle; text-align:left;'>"+this.xAxisAtt.unit+"</div></v:TextBox>";
    this.canvas.appendChild(XXXunit);
    this.canvas.appendChild(YYYunit);
    //画6条横坐标以及纵坐标刻度
    var yLableNum = 8;
    var beginY = this.yAxisAtt.maxValue;
    var dY = (this.yAxisAtt.maxValue-this.yAxisAtt.minValue)/(yLableNum-1);
    for(i=0; i<yLableNum; i++)
    {
       var l1 = document.createElement("<v:line from='1900,"+(i*2000+3500)+"' to='2000,"+(i*2000+3500)+"' style='z-index:2' strokecolor='#000000'></v:line>");
       var l2 = document.createElement("<v:line from='2000,"+(i*2000+3500)+"' to='2500,"+(i*2000+3000)+"' style='z-index:2' strokecolor='#0099FF'></v:line>");
       var l3 = document.createElement("<v:line from='2500,"+(i*2000+3000)+"' to='"+(this.cordSizeX-2000)+","+(i*2000+3000)+"' style='z-index:2' strokecolor='#0099FF'></v:line>");
       var l4 = document.createElement("<v:line from='2500,"+(i*2000+4000)+"' to='"+(this.cordSizeX-2000)+","+(i*2000+4000)+"' style='z-index:2' strokecolor='#0099FF'></v:line>");
       var stroke = document.createElement("<v:stroke dashstyle='Dot'/>");
        l4.appendChild(stroke);
        //纵坐标
        var r1 = document.createElement("<v:Rect style='position:relative;left:100px;top:"+(i*2000+2800)+"px;width:1700px;height:800px' fillcolor='red' filled = 'f' stroked='false'></v:Rect>");
        var t1 = document.createElement("<v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:7pt;'></v:TextBox>");
        var d1 = document.createElement("<div style='vertical-align:middle; text-align:right;'></div>");
        d1.innerHTML = xRound(beginY-i*dY,this.yAxisAtt.precision);
        t1.appendChild(d1);
        r1.appendChild(t1);
        if(i!=yLableNum-1)
        {
            this.canvas.appendChild(l1);
            this.canvas.appendChild(l4);
        }
           this.canvas.appendChild(r1);
           this.canvas.appendChild(l2);
           this.canvas.appendChild(l3);
    }
    //纵线 3D效果
    this.canvas.appendChild(document.createElement("<v:line from='2500,3000' to='2500,17000' style='z-index:2' strokecolor='#0099FF'></v:line>"));
    //填补左上角小三角形v:shape path='m2000,4000lxe' style='z-index:5' fillcolor='red'
    //this.canvas.appendChild(document.createElement("<v:shape coordsize='2000,2000' style='position:absolute;width:500px;height:500px;z-index:3;left:2000px;top:2500px;'stroked='false' fillcolor='red' path='m 2000,4000 l 2500,3500,3500,4000,2000,4000 x e'/></v:shape>"));
    this.container.appendChild(this.canvas);
}
  /////////////////////////////////////////////////
    //////*静态 */整体添加  静态this.XLength = 14500;// = 15500;
RectChart3D.prototype.AddRect = function()
{
    this.rectCanvas=document.createElement("<v:group id='" + this.container.id + "_RectCanvas' style='position:absolute;left:0px;top:0px;width:"+this.cordSizeX/40+"px;height:"+(this.height-20)+"px;'coordsize = '"+this.cordSizeX+",20000'></v:group>");
    var beginY = this.yAxisAtt.maxValue;
    var dY = (this.yAxisAtt.maxValue-this.yAxisAtt.minValue)/this.YLength;
    var cureentL = 2500;//当前画图位置
    for(i=0; i<this.dataArray.length; i++)
    {
         for(j=0;j<this.nSeries;j++)
         {
             //beginY为数据最大值与 y轴坐标最大值 14000对应
             //数据个数为 num 与  x轴坐标最大值 15000  对应
             //宽度最大设置为2500 最小为
             var currentValue = this.dataArray[i][j]||0;
             var iHeight = parseInt(currentValue/dY);
             //柱子
             var rectColor = this.defaultColor[j]; //默认同组柱子颜色不容
             if(this.nSeries==1)//每组只有1个数据的话每个柱子要用不同颜色
                 rectColor = this.defaultColor[i%this.defaultColor.length];
             var s1 = document.createElement("<v:shape id='" + this.container.id + "_Box_"+i+"' type='#" + this.container.id + "_Box' fillcolor='"+rectColor+"' strokecolor='#5f5f5f' style='position:relative; left:"+cureentL+"px;top:"+(17000-iHeight)+"px;width:"+this.rectWidth+"px;height:"+(iHeight+500)+"px;z-index:5' title='" + this.titleArray[i] + "'></v:shape>");
             var f1 = document.createElement("<v:fill o:opacity2='52429f' rotate='t' angle='-45' focus='100%' type='gradient'/>");
             s1.appendChild(f1);
             //value
             var value = document.createElement("<v:Rect style='position:relative;left:"+cureentL+"px;top:"+(16000-iHeight)+"px;width:1000px;height:800px' fillcolor='red' filled = 'f' stroked='false'></v:Rect>");
             var tb1 = document.createElement("<v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:7pt;'></v:TextBox>");
             tb1.innerHTML = "<div style='vertical-align:middle;text-align:center;'>"+currentValue+"</div>";
             value.appendChild(tb1);
             //name
             var name = document.createElement("<v:Rect style='position:relative;left:"+cureentL+"px;top:17600px;width:1000px;height:1000px' fillcolor='red' filled = 'f' stroked='false'></v:Rect>");
             var tb2 = document.createElement("<v:TextBox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;'></v:TextBox>");
             tb2.innerHTML = "<div style='vertical-align:middle;text-align:center;'>"+this.lableArray[j]+"</div>";
             name.appendChild(tb2);
             if (iHeight!=0)//0的话不显示柱子
                 this.rectCanvas.appendChild(s1);
             this.rectCanvas.appendChild(value);
             this.rectCanvas.appendChild(name);
             cureentL += this.rectWidth;
         }
         cureentL += this.recd_Dx;
    }
    this.container.appendChild(this.rectCanvas);
}
RectChart3D.prototype.ClearAllRect = function()
{
    this.rectCanvas.innerHTML="";
}

下面是调用

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HistoryStatistic.aspx.cs" Inherits="VmlProject.HistoryStatistic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head id="Head1" runat="server">
    <style type="text/css">
        v\:*
        {
            behavior: url(#default#VML);
        }
        o\:*
        {
            behavior: url(#default#VML);
        }
        body
        {
            font-family: arial;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题页</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/PieChart.js" type="text/javascript"></script>
    <script src="js/RectChart3D.js" type="text/javascript"></script>
    <script src="js/RectChart.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="div1" style="position:relative; float:left;"></div>
    <div id="div2" style="position:relative; float:left;margin-left:10px;"></div>
    <div id="div3" style="position:relative; margin-top:10px; float:left; width:500px; height:300px;"></div>
    <div id="div4" style="position:relative; float:left;margin-top:10px; margin-left:10px;"></div>
    </div>
    <script language="javascript" type="text/javascript">
    var pData = new Array();
    for(i=0;i<10;i++)
    {
       var   oData=new   Object();
       oData[0]=i*100;
       oData[1]=Math.random()*10;
       pData[i]=oData;
    }
     DrawPieChart("div1",500,300,pData,"3D饼图","元","3D");
     DrawPieChart("div2",500,300,pData,"2D饼图","元","2D");
     DrawRectChart("div4",pData,500,300,"2D柱图", "天", "元","2D")
     //////////////////////////////////////////////////////////
    pData = new Array();
    var oData;
    for(i=0;i<16;i++)
    {
       oData=new   Object();
       oData[0]=i;
       oData[1]=i*3;
       oData[2]=i*6;
       oData[3]=i*2;
       oData[4]=i*4;
       pData[i]=oData;
    }
     var aaa = new RectChart3D('div3',500,300,null,false,null);
     aaa.SetCaptionAtt('实时监测柱状图',null,null);
     aaa.SetxAxisAtt('时间',null,null,null,null);
     aaa.SetyAxisAtt(0,100,2,'值',null,null,null,6,null);
     aaa.SetData(pData,pData,5,oData);
     aaa.Draw();
     aaa.AddRect();
    </script>
    </form>
    </body>
</html>

原作谁记不清了，感谢原作