/*未经许可,不得转载!
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>