立体感的柱状图

最新推荐文章于 2024-12-05 16:58:20 发布

原创最新推荐文章于 2024-12-05 16:58:20 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #function #behavior #javascript #textbox #office

java技术专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript创建简单柱状图表的方法。通过定义不同的函数来实现柱状图、背景、线条及文字等元素的绘制。此外，还展示了如何设置样式属性以实现更丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源代码如下：

<%@ page contentType="text/html; charset=GBK"%>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<!--[if !mso]>

<style>

v/:* { behavior: url(#default#VML) }

o/:* { behavior: url(#default#VML) }

.shape { behavior: url(#default#VML) }

</style>

<![endif]-->

<HEAD>

<TITLE>柱状图形报表样列</TITLE>

//addPole 增加一个柱状图

//left 与窗口左边的距离

//width 宽度

//height 高度

//zindex 层高度

//fillcolor 主色

//color 渐变色

//type 默认为竖,1为横

function addPole(left,top,width,height,zindex,fillcolor,color,type){

top=top-height;

var a="";

if(type==1){

a="angle='-90' focus='100%'";

}

var html="<v:rect style='position:absolute;";

html=html+"left:"+left+"px;";

html=html+"top:"+top+"px;";

html=html+"width:"+width+"px;";

html=html+"height:"+height+"px;";

html=html+"z-index:"+zindex+"'";

html=html+"fillcolor='"+fillcolor+"'>";

html=html+"<v:fill color2='"+color+"'";

html=html+" rotate='t' "+a+" type='gradient'/><o:extrusion v:ext='view' backdepth='20pt' ";

html=html+"color='"+fillcolor+"' on='t'/></v:rect>";

document.write(html);

}

//left 与窗口左边的距离

//width 宽度

//height 高度

//zindex 立体高度

//fillcolor 主色

function addBackground(left,top,width,height,zindex,fillcolor){

top=top-height;

var html="<v:rect style='position:absolute;left:"+left+"px;";

html=html+"top:"+top+"px;";

html=html+"width:"+width+"px;";

html=html+"height:"+height+"px;";

html=html+"z-index:"+zindex+"'";

html=html+"fillcolor='"+fillcolor+"'";

html=html+" stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect>";

document.write(html);

}

function addLine(zindex,from,to,color){

var html="<v:line style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:"+zindex+"'";

html=html+" from='"+from+"' to='"+to+"' strokecolor='"+color+"'/>"

document.write(html);

}

function addText(left,top,width,height,zindex,value,fontsize){

top=top-height;

var html="<v:shape style='position:absolute;left:"+left+"px;";

html=html+"top:"+top+"px;";

html=html+"width:"+width+"px;";

html=html+"height:"+height+"px;";

html=html+"z-index:"+zindex+"'>";

html=html+"<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td";

html=html+" style='FONT-SIZE:"+fontsize+"' align='center'>"+value+"</td></tr></table></v:textbox></v:shape>";

document.write(html);

}

function addGround(left,top,width,height,zindex,fillcolor,linecolor1,linecolor2,offset,level,min,leftoffset,textwidth,textheight,fontsize){

addBackground(left,top,width,height,zindex,fillcolor);

addLine(zindex,left+"px,"+top+"px",((left-0)+(width-0))+"px,"+top+"px",linecolor1);

addLine(zindex,left+"px,"+top+"px",left+"px,"+(top-height)+"px",linecolor1);

addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(width-0))+"px,"+(top-offset)+"px",linecolor2);

addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+(top-height)+"px",linecolor2);

addLine(zindex,left+"px,"+(top-offset)+"px",((left-0)+(offset-0))+"px,"+top+"px",linecolor2);

for(var i=1;i<level;i++){

addLine(zindex,left+"px,"+(top-offset-(height*i)/level)+"px",((left-0)+(offset-0))+"px,"+(top-(height*i)/level)+"px",linecolor2);

addLine(zindex,(left-leftoffset)+"px,"+(top-(height*i)/level)+"px",left+"px,"+(top-(height*i)/level)+"px",linecolor1);

addText(left-textwidth,(top-(height*i)/level)+(textheight-0)+2,textwidth,textheight,"-1",i*min,fontsize)

addLine(zindex,((left-0)+(offset-0))+"px,"+(top-offset-(height*i)/level)+"px",((left-0)+(width-0))+"px,"+(top-offset-(height*i)/level)+"px",linecolor2);

}

addLine(zindex,(left-leftoffset)+"px,"+(top-(height*level)/level)+"px",left+"px,"+(top-(height*level)/level)+"px",linecolor1);

addText(left-textwidth,(top-(height*level)/level)+(textheight-0)+2,textwidth,textheight,"-1",level*min,fontsize)

}

function addEPole(left,top,width,height,zindex,fillcolor,color,textwidth,textheight,value1,value2,fontsize){

addText(left-textwidth/2+width/2,top-height-10,textwidth,textheight,zindex,value1,fontsize);

addText(left-textwidth/2+width/2,(top-0)+(textheight-0),textwidth,textheight,zindex,value2,fontsize);

addPole(left,top,width,height,zindex,fillcolor,color)

}

</SCRIPT>

</HEAD>

<BODY>

<div>

<!--

addEPole("180","400","30","150","1","#3300FF","#66FFFF","80","18","300","1月份","9pt");

addEPole("230","400","30","300","1","#FF0000","#99FFFF","80","18","600","2月份","9pt");

addEPole("280","400","30","200","1","#33CC00","#99FFFF","80","18","400","3月份","9pt");

addEPole("330","400","30","100","1","#FF0099","#99FFFF","80","18","200","4月份","9pt");

addEPole("380","400","30","50","1","#660000","#99FFFF","80","18","100","5月份","9pt");

addEPole("430","400","30","20","1","#FFFF00","#99FFFF","80","18","40","6月份","9pt");

addEPole("480","400","30","180","1","#330066","#99FFFF","80","18","360","7月份","9pt");

addEPole("530","400","30","120","1","#CC6633","#99FFFF","80","18","240","8月份","9pt");

addEPole("580","400","30","80","1","#9933FF","#99FFFF","80","18","160","9月份","9pt");

addGround("160","400","460","300","-1","#33CCFF","#000000","#6699CC","10","6","100","20","40","18","9pt")

//-->

</SCRIPT>

</div>

</body>

</html>