不用任何控件的VML统计图(2)-柱状图

来源：互联网发布：青年文摘知乎编辑：程序博客网时间：2024/06/05 23:56

/*未经许可，不得转载！

Email:zcwmxn@sina.com

作者：周长武

<html xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<STYLE>
v/:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="JavaScript" type="text/javascript">
MAXVALUE = 87
function drawLinesX(m)
{
   count=0; //画横坐标
   var textPoint = MAXVALUE/5;
   for(var i=1;i<=10;i++){
    var py=2750-i*245;
    var strTo=m+" "+py;
    var newLine = document.createElement("<v:line from='200 "+py+"' to='"+strTo+"'

style='position:absolute;z-index:8'></v:line>");
    group1.insertBefore(newLine);
    if(count%2!=0){
      var newStroke = document.createElement("<v:stroke color='#c0c0c0'>");
      newLine.insertBefore(newStroke);
      var newShape= document.createElement("<v:shape style='position:absolute;text-align :

left;font-weight :bold;left:100;top:"+(py-50)+";WIDTH:400px;HEIGHT:200px;z-index:8'

coordsize='21600,21600' fillcolor='white'></v:shape>")
      group1.insertBefore(newShape);
      if(count%9==0)
      {
       var newText = document.createElement("<v:textbox id='tx"+ MAXVALUE +"'

inset='0pt,0pt,0pt,0pt' style='font-size:10pt;v-text-anchor:bottom-right-

baseline'></v:textbox>");
       newShape.insertBefore(newText);
       newText.innerText = MAXVALUE;
      }
    }
   else//虚线
    {
     if(count%3==1 & MAXVALUE%2 == 0)
      {
       var newShape= document.createElement("<v:shape style='position:absolute;text-align :

left;font-weight :bold;left:100;top:"+(py-50)+";WIDTH:400px;HEIGHT:200px;z-index:8'

coordsize='21600,21600' fillcolor='white'></v:shape>")
group1.insertBefore(newShape);
var newText = document.createElement("<v:textbox id='tx"+ MAXVALUE/2 +"'

inset='0pt,0pt,0pt,0pt' style='font-size:10pt;v-text-anchor:bottom-right-

baseline'></v:textbox>");
       newShape.insertBefore(newText);
       newText.innerText = MAXVALUE/2;
      }
      var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
      newLine.insertBefore(newStroke);
    }
    count++;
   }
}
function drawLinesY(NameGroups,EveryValues)
{
   var textPoint=1;
   Name = NameGroups.split(",")
   GROUPCOUNT = Name.length
   for(var i=1;i<=GROUPCOUNT;i++){//为计算方便，i 从1开始
    var py= 170 + i * 4200/GROUPCOUNT;
    var newLine = document.createElement("<v:line from='"+py+" 2700' to='"+py+" 2750'

style='position:absolute;z-index:8'></v:line>");
    group1.insertBefore(newLine);
    var newStroke = document.createElement("<v:stroke color='black'>");
    newLine.insertBefore(newStroke);
    var newShape= document.createElement("<v:shape style='white-space:

nowrap;position:absolute;text-align:left;left:"+((i-1) * 4200/GROUPCOUNT +

(4200/2/GROUPCOUNT))+";top:2750;WIDTH:410px;HEIGHT:150px;z-index:18' coordsize='21600,21600'

fillcolor='white'></v:shape>")
group1.insertBefore(newShape);
var newText = document.createElement("<v:textbox id='ty"+Name[i-1]+"'

inset='3pt,0pt,3pt,0pt' style='font-size:9pt;v-text-anchor:bottom-right-

baseline'></v:textbox>");
    newShape.insertBefore(newText);
    newText.innerHTML=Name[i-1];
   }

   value = EveryValues.split(",")
    for(var i=1;i<=value.length;i++)
     drawBar(value[i-1],i,Name[i-1],i);
}

function drawBar(heighValue,t,departName,i)
{
   var h = 2450 * (heighValue/MAXVALUE) - 50;
   var px = 2750 - 2450 * (heighValue/MAXVALUE);
   var py = (t-1) * 4200/GROUPCOUNT + (4200/2/GROUPCOUNT); //170 + (t-1) * 4200/n 表示每个

点开始的坐标，(4200/2/n)表示中间位置
var newShape= document.createElement("<v:rect style='border:0px solid

red;position:absolute;left:"+py+";top:"+px+";WIDTH:190px;HEIGHT:"+h+"px;z-index:9'

coordsize='21600,21600' fillcolor='#0099CC'></v:rect>")
   group1.insertBefore(newShape);

    var newShape= document.createElement("<v:shape style='white-space:

nowrap;position:absolute;text-align:left;left:"+ ( py+40) +";top:" + (px - 70)+

";WIDTH:410px;HEIGHT:150px;z-index:10' coordsize='21600,21600'></v:shape>")
group1.insertBefore(newShape);
var newText = document.createElement("<v:textbox id='ty"+Name[i-1]+"'

inset='3pt,0pt,3pt,0pt' style='font-size:9pt;v-text-anchor:bottom-right-baseline;font-

weight:bold'></v:textbox>");
newShape.insertBefore(newText);
newText.innerHTML=heighValue;
}
</script>
</HEAD>
<BODY>
<v:group ID="group1" style="WIDTH:800px;HEIGHT:500px" coordsize="4900,3000">
<v:line from="200,100" to="200,2700" style="Z-INDEX:8;POSITION:absolute"

strokeweight="1pt">
<v:stroke StartArrow="classic"/>
<v:shape style='position:absolute;text-align:left;font-weight:bold;left:10;white-space:

nowrap; top:0;z-index:8;' coordsize='21600,21600' fillcolor='white'>
<v:textbox inset='0pt,0pt,0pt,0pt'>需求数量</v:textbox>
</v:shape>
</v:line>
<v:line from="200,2700" to="4500,2700" style="Z-INDEX:8;POSITION:absolute"

strokeweight="1pt">
<v:stroke EndArrow="classic"/>
<v:shape style='position:absolute;text-align:left;font-weight:bold;left:680;white-space:

nowrap; top:14;z-index:8;' coordsize='21600,21600'>
<v:textbox inset='0pt,0pt,0pt,0pt'>部门</v:textbox>
</v:shape>
</v:line>
<v:rect style="WIDTH:4600px;HEIGHT:2900px" coordsize="21600,21600" fillcolor="white"

strokecolor="black">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt"/>
</v:rect>

<v:shape style='position:absolute;text-align:left;font-weight:bold;left:23;white-space:

nowrap; top:387px;' coordsize='21600,21600'>
<v:textbox inset='0pt,0pt,0pt,0pt'>0</v:textbox>
</v:shape>
<v:shape style="position:absolute;left:50;top:2650;WIDTH:1000px;HEIGHT:200px;z-index:8"

coordsize="21600,21600" fillcolor="white"/>
</v:group>
<br>
</BODY>
<script language="javascript" type="text/javascript">
     drawLinesX(4350);
     var xxx = "项目1,项目2,项目3,项目4,项目5,项目6"
     var yyy = "13,28,87,32,56,2"
     drawLinesY(xxx,yyy)
</script>
</HTML>