用javascript和vml写的柱图，缺陷是只能在Ie下运行
最近公司的项目要用到图标，我去调研了下，改改别人的代码，做了个柱图，是用javascript和Vml做的。
vml只能在IE中运行，所以在其他浏览器中够呛啊！
当然，一般web做图标，大家的建议都是用Flash或者SilverLight或者第三方收费的插件，我这也是在小打小闹，贴出代码来
和大家分享。
Html代码：
Html
<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head runat="server">
<title>测试柱图</title>
<STYLE>
v\:*{behavior:url(#default#VML);}
o\:*{ behavior: url(#default#VML) }
.shape{ behavior: url(#default#VML) }
.tips{border: 1px solid #666666;padding: 5px 10px 5px 10px;position: absolute;background-color: #ffffff;filter:alpha(Opacity=80);}
</STYLE>
<SCRIPT language="javascript" src="Js.js"></SCRIPT>//Js文件代码在下面
<script language="javascript">
var data = new Array();
data[0] = new Array();
data[0][0] = 300;
data[0][1] = 120;
data[0][2] = 80;
data[0][3] = 70;
data[0][4] = 48;
data[0][5] = 120;
data[1] = new Array();
data[1][0] = 140;
data[1][1] = 189;
data[1][2] = 80;
data[1][3] = 90;
data[1][4] = 22;
data[1][5] = 110;
var datahead = new Array();
datahead[0] = "类别1";
datahead[1] = "类别2";
datahead[2] = "类别3";
datahead[3] = "类别4";
datahead[4] = "类别5";
datahead[5] = "类别6";
datahead[6] = "类别7";
var group = ["分组1","分组2"];
var draw=new draw3D(data,datahead,tDraw,group);
draw.draw();
</script>
<body>
<form id="form1">
<div id="tDraw" style="width:800px;height:450px;overflow:auto;"></div>
</form>
</body>
</html>Javascript代码
Js.js文件
function draw3D(dataSrc,dataHd,div,group)
{
this.DataSource=dataSrc; //数据源
this.DataHead=dataHd; //表头
this.Color=new Array("#ff00ff","#a6aeff","#ffff00","#0000ff","#84aeff","#00ffff","#00ff00","#b5ffb5","#ffff00","#ffffb5")
this.DrGroup=group;
this.DrawDiv=div; //用于画图的DIV，建议用DIV而避免用其他标签
this.drawPole=DR_drawPole; //画柱状图
this.draw=DR_draw; //画图
}
function DR_draw(){
this.DrawDiv.innerHTML=draw.drawPole();
}
function DR_drawPole()
{
if(this.DataSource.length<1)return;
// 数据最大值
var intMax=0;
for(var j=0;j<this.DataSource.length;j++)
{
for(var i=0;i<this.DataSource[j].length;i++)
{
intMax=(intMax < parseInt(this.DataSource[j][i])?parseInt(this.DataSource[j][i]):intMax);
}
}
intMax=(parseInt(intMax / Math.pow(10,(intMax+"").length - 1)) + 1) * Math.pow(10,(intMax+"").length - 1);
//数组元素个数
var intTotal=(this.DataSource[0].length + 1)*(this.DataSource.length+1);
//每个柱子的宽度
var intPWidth=100;
//偏移量=起始位置
var offset = 150;
//柱宽*组的个数
var groupWidth= intPWidth*this.DataSource.length;
//柱与柱间的间隔
var intPad=400;
var lineWidth = ((this.DataSource.length-1)*offset +parseInt(groupWidth * (this.DataSource[0].length + 1),10)+parseInt(intPad * (this.DataSource[0].length + 0.5),10));
var str="<v:group id='groupBar' style='width:500;height:500;position:absolute;' CoordSize='3600,3600'>\n"
//画底板
str += "<v:PolyLine Points='400,2400 200,2600 "+(lineWidth-200)+",2600 "+lineWidth+",2400' strokecolor='#0099ff'>\n" //底
str += "<v:fill color='#00cfef' angle='45' rotate='t' focus='100%' type='gradient' />\n"
str += "</v:PolyLine>\n"
str += "<v:PolyLine Points='400,2400 200,2600 200,200 400,0 ' strokecolor='#0099ff'>\n" //左
str += "<v:fill color='#00cfef' angle='210' rotate='t' focus='100%' type='gradient' />\n"
str += "</v:PolyLine>\n"
str += "<v:PolyLine Points='400,0 "+lineWidth+",0 "+lineWidth+",2400 400,2400 ' strokecolor='#0099ff'>\n"
str += "<v:fill color='#00cfef' angle='135' rotate='t' focus='100%' type='gradient' />\n" //正
str += "</v:PolyLine>\n"
//画虚线
for(var i=1;i<10;i++){
str += "<v:PolyLine filled='false' Points='200,"+(2600 - 240 * i)+" 400,"+(2400 - 240 * i)+" "+lineWidth+","+(2400 - 240 * i)+"' strokecolor='#0099ff'>\n"
str += "<v:stroke dashstyle='Dash' />\n"
str += "</v:PolyLine>\n"
}
//画左边的坐标
for(var i=1;i<11;i++){
str+="<v:RoundRect style='left:0;top:"+(2600 - 240 * i)+";' strokeColor='transparent'>"
str+="<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;color:#0000ff;'>"+(i*(intMax / 10))+"</v:textbox></v:RoundRect>"
}
//画底下的标签
for (var i=0;i<this.DataSource[0].length;i++)
{
str+="<v:RoundRect style='left:"+(offset +parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10))+";top:2600;' strokeColor='transparent'>"
str+="<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;color:#0099ff;'>"+this.DataHead[i]+"</v:textbox></v:RoundRect>"
}
offset = 0;
//画柱状图
for(var j=0;j<this.DataSource.length;j++)
{
offset += 150;
for(var i=0;i<this.DataSource[j].length;i++)
{
var strPoints = offset + parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10)+",2400 "+(offset + parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10))+","+(2400 - parseInt(this.DataSource[j][i]/intMax * 2400,10))+" "+(offset + parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10) + intPWidth)+"," +(2400 - parseInt(this.DataSource[j][i]/intMax * 2400,10))+" "+(offset + parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10) + intPWidth)+",2400 ";
str += "<v:PolyLine style='cursor:hand;' onclick=alert('这里可以传值') title='"+this.DataHead[i]+"\n"+this.DataSource[j][i]+"' onmouseover='this.fillcolor=\"#33FFFF\"' onmouseout='this.fillcolor=\""+this.Color[j]+"\"' Points='"+strPoints+"' strokecolor='#ffffff'>\n"
str += "<v:fill color='"+this.Color[j]+"' angle='150' rotate='t' focus='100%' type='gradient' />\n"
str += "<o:extrusion v:ext='view' on='t' backdepth='0' foredepth='"+(parseInt(intPWidth / 10))+"' />\n"
str += "</v:PolyLine>\n";
}
}
offset = 0;
//画每根柱的数据量
for(var j=0;j<this.DataSource.length;j++)
{
offset += 150;
for (var i=0;i<this.DataSource[0].length;i++)
{
str+="<v:RoundRect style='left:"+(offset +parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10))+";top:"+(2400 - parseInt(this.DataSource[j][i]/intMax * 2400 + 100))+";' strokeColor='transparent' >"
str+="<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;color:#ff00ff;'>"+this.DataSource[j][i]+"</v:textbox></v:RoundRect>"
}
}
//画右边的图例
var intTmp=0
for (var i=0;i<this.DrGroup.length;i++)
{
str += "<v:rect style='top:"+(i*200)+";left:"+(lineWidth+100)+";width:100;height:100;' strokecolor='#0099ff' fillcolor='"+this.Color[i]+"'></v:rect>";
str+="<v:line from='"+(lineWidth+300)+","+(i*200)+"' to='"+(lineWidth+700)+","+(i*200)+"' strokecolor='#ffffff' strokeWeight='2'>";
str += "<v:textbox inset='0pt,0pt,0pt,0pt' style='color:#0099ff;font-size:9pt;'>"+this.DrGroup[i]+"</v:textbox></v:line>";
}
str += "</v:group>"
return str;
}运行效果图：
vml只能在IE中运行，所以在其他浏览器中够呛啊！
当然，一般web做图标，大家的建议都是用Flash或者SilverLight或者第三方收费的插件，我这也是在小打小闹，贴出代码来
和大家分享。
Html代码：
Html<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head runat="server">
<title>测试柱图</title>
<STYLE>
v\:*{behavior:url(#default#VML);}
o\:*{ behavior: url(#default#VML) }
.shape{ behavior: url(#default#VML) }
.tips{border: 1px solid #666666;padding: 5px 10px 5px 10px;position: absolute;background-color: #ffffff;filter:alpha(Opacity=80);}
</STYLE>
<SCRIPT language="javascript" src="Js.js"></SCRIPT>//Js文件代码在下面
<script language="javascript">
var data = new Array();
data[0] = new Array();
data[0][0] = 300;
data[0][1] = 120;
data[0][2] = 80;
data[0][3] = 70;
data[0][4] = 48;
data[0][5] = 120;
data[1] = new Array();
data[1][0] = 140;
data[1][1] = 189;
data[1][2] = 80;
data[1][3] = 90;
data[1][4] = 22;
data[1][5] = 110;
var datahead = new Array();
datahead[0] = "类别1";
datahead[1] = "类别2";
datahead[2] = "类别3";
datahead[3] = "类别4";
datahead[4] = "类别5";
datahead[5] = "类别6";
datahead[6] = "类别7";
var group = ["分组1","分组2"];
var draw=new draw3D(data,datahead,tDraw,group);
draw.draw();
</script>
<body>
<form id="form1">
<div id="tDraw" style="width:800px;height:450px;overflow:auto;"></div>
</form>
</body>
</html>
Js.js文件function draw3D(dataSrc,dataHd,div,group)
{
this.DataSource=dataSrc; //数据源
this.DataHead=dataHd; //表头
this.Color=new Array("#ff00ff","#a6aeff","#ffff00","#0000ff","#84aeff","#00ffff","#00ff00","#b5ffb5","#ffff00","#ffffb5")
this.DrGroup=group;
this.DrawDiv=div; //用于画图的DIV，建议用DIV而避免用其他标签
this.drawPole=DR_drawPole; //画柱状图
this.draw=DR_draw; //画图
}
function DR_draw(){
this.DrawDiv.innerHTML=draw.drawPole();
}
function DR_drawPole()
{
if(this.DataSource.length<1)return;
// 数据最大值
var intMax=0;
for(var j=0;j<this.DataSource.length;j++)
{
for(var i=0;i<this.DataSource[j].length;i++)
{
intMax=(intMax < parseInt(this.DataSource[j][i])?parseInt(this.DataSource[j][i]):intMax);
}
}
intMax=(parseInt(intMax / Math.pow(10,(intMax+"").length - 1)) + 1) * Math.pow(10,(intMax+"").length - 1);
//数组元素个数
var intTotal=(this.DataSource[0].length + 1)*(this.DataSource.length+1);
//每个柱子的宽度
var intPWidth=100;
//偏移量=起始位置
var offset = 150;
//柱宽*组的个数
var groupWidth= intPWidth*this.DataSource.length;
//柱与柱间的间隔
var intPad=400;
var lineWidth = ((this.DataSource.length-1)*offset +parseInt(groupWidth * (this.DataSource[0].length + 1),10)+parseInt(intPad * (this.DataSource[0].length + 0.5),10));
var str="<v:group id='groupBar' style='width:500;height:500;position:absolute;' CoordSize='3600,3600'>\n"
//画底板
str += "<v:PolyLine Points='400,2400 200,2600 "+(lineWidth-200)+",2600 "+lineWidth+",2400' strokecolor='#0099ff'>\n" //底
str += "<v:fill color='#00cfef' angle='45' rotate='t' focus='100%' type='gradient' />\n"
str += "</v:PolyLine>\n"
str += "<v:PolyLine Points='400,2400 200,2600 200,200 400,0 ' strokecolor='#0099ff'>\n" //左
str += "<v:fill color='#00cfef' angle='210' rotate='t' focus='100%' type='gradient' />\n"
str += "</v:PolyLine>\n"
str += "<v:PolyLine Points='400,0 "+lineWidth+",0 "+lineWidth+",2400 400,2400 ' strokecolor='#0099ff'>\n"
str += "<v:fill color='#00cfef' angle='135' rotate='t' focus='100%' type='gradient' />\n" //正
str += "</v:PolyLine>\n"
//画虚线
for(var i=1;i<10;i++){
str += "<v:PolyLine filled='false' Points='200,"+(2600 - 240 * i)+" 400,"+(2400 - 240 * i)+" "+lineWidth+","+(2400 - 240 * i)+"' strokecolor='#0099ff'>\n"
str += "<v:stroke dashstyle='Dash' />\n"
str += "</v:PolyLine>\n"
}
//画左边的坐标
for(var i=1;i<11;i++){
str+="<v:RoundRect style='left:0;top:"+(2600 - 240 * i)+";' strokeColor='transparent'>"
str+="<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;color:#0000ff;'>"+(i*(intMax / 10))+"</v:textbox></v:RoundRect>"
}
//画底下的标签
for (var i=0;i<this.DataSource[0].length;i++)
{
str+="<v:RoundRect style='left:"+(offset +parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10))+";top:2600;' strokeColor='transparent'>"
str+="<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;color:#0099ff;'>"+this.DataHead[i]+"</v:textbox></v:RoundRect>"
}
offset = 0;
//画柱状图
for(var j=0;j<this.DataSource.length;j++)
{
offset += 150;
for(var i=0;i<this.DataSource[j].length;i++)
{
var strPoints = offset + parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10)+",2400 "+(offset + parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10))+","+(2400 - parseInt(this.DataSource[j][i]/intMax * 2400,10))+" "+(offset + parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10) + intPWidth)+"," +(2400 - parseInt(this.DataSource[j][i]/intMax * 2400,10))+" "+(offset + parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10) + intPWidth)+",2400 ";
str += "<v:PolyLine style='cursor:hand;' onclick=alert('这里可以传值') title='"+this.DataHead[i]+"\n"+this.DataSource[j][i]+"' onmouseover='this.fillcolor=\"#33FFFF\"' onmouseout='this.fillcolor=\""+this.Color[j]+"\"' Points='"+strPoints+"' strokecolor='#ffffff'>\n"
str += "<v:fill color='"+this.Color[j]+"' angle='150' rotate='t' focus='100%' type='gradient' />\n"
str += "<o:extrusion v:ext='view' on='t' backdepth='0' foredepth='"+(parseInt(intPWidth / 10))+"' />\n"
str += "</v:PolyLine>\n";
}
}
offset = 0;
//画每根柱的数据量
for(var j=0;j<this.DataSource.length;j++)
{
offset += 150;
for (var i=0;i<this.DataSource[0].length;i++)
{
str+="<v:RoundRect style='left:"+(offset +parseInt(groupWidth * (i + 1),10)+parseInt(intPad * (i + 0.5),10))+";top:"+(2400 - parseInt(this.DataSource[j][i]/intMax * 2400 + 100))+";' strokeColor='transparent' >"
str+="<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;color:#ff00ff;'>"+this.DataSource[j][i]+"</v:textbox></v:RoundRect>"
}
}
//画右边的图例
var intTmp=0
for (var i=0;i<this.DrGroup.length;i++)
{
str += "<v:rect style='top:"+(i*200)+";left:"+(lineWidth+100)+";width:100;height:100;' strokecolor='#0099ff' fillcolor='"+this.Color[i]+"'></v:rect>";
str+="<v:line from='"+(lineWidth+300)+","+(i*200)+"' to='"+(lineWidth+700)+","+(i*200)+"' strokecolor='#ffffff' strokeWeight='2'>";
str += "<v:textbox inset='0pt,0pt,0pt,0pt' style='color:#0099ff;font-size:9pt;'>"+this.DrGroup[i]+"</v:textbox></v:line>";
}
str += "</v:group>"
return str;
}
