var y_min=0;//标签最小值
var y_max=100;//标签最大值
var y_value_per_step=10;//标签步长
var y_steps=(y_max-y_min)/y_value_per_step;//标签总步数
var div_left=0;//层边距
var div_top=80;//层高距
var width=1024;//视图区宽度
var height=350;//视图区高度
var left_blank=60;//左边距
var right_blank=80;//右边距
var top_blank=40;//上边距
var bottom_blank=20;//下边距
var label_left=20;//标签左边距
var bar_width=17;//柱宽
var ystep=(height-top_blank-bottom_blank)/y_steps;//y每步像素数
//绘图区初始化
function init()
{
curve.style.top=div_top;
curve.style.left=div_left;
group1.style.width=width;
group1.style.height=height;
group1.coordsize=width+","+height;
back_ground.style.width=width;
back_ground.style.height=height; //y轴
var y_axis=document.createElement("");
y_axis.insertBefore(document.createElement(""));
group1.insertBefore(y_axis); //x轴
var x_axis=document.createElement("");
x_axis.insertBefore(document.createElement(""));
group1.insertBefore(x_axis); //提示线
var tip_line=document.createElement("");
group1.insertBefore(tip_line); //提示框
var tip_box=document.createElement("");
group1.insertBefore(tip_box);
}
//***********************************提示线、提示框鼠标跟随***********************************
//鼠标位置内部值=(当前鼠标真实位置-div层对window的偏移量)/放大倍率
function moveline()
{
var box_width=80;
var box_top=60;
var current_cursor_x=event.clientX;
var current_cursor_y=event.clientY;
var line_in=current_cursor_x-div_left;
var top_in=current_cursor_y-div_top;
if(line_in>=left_blank&&line_in<=(width-right_blank))
{//控制边界 //线跟随
line1.style.left=line_in-left_blank; //框跟随
var temp_value=get_div_value(line_in);
msg_box.innerHTML=" "+temp_value+"";
if(line_in=top_blank&&top_in<=(height-bottom_blank))
{
if(top_in<=height-bottom_blank-box_top-10)
{
msg_box.style.top=top_in;
}else
{
msg_box.style.top=top_in-box_top;
}
}
}
}
//由鼠标当前位置获得对应隐藏div层的值
function get_div_value(arg)
{
var result="";
var temp1=(arg-left_blank)/bar_width;
temp1=parseInt(temp1);
var temp2=temp1%5;
var temp_id=(temp1+5-temp2)/5+"_"+temp2;
var temp_obj=document.getElementById(temp_id);
if(temp_obj!=null){ result=num_format(temp_obj.innerHTML);
result=result+"%"; } return result; } //数值格式化
function num_format(arg)
{
var result=parseInt(arg*Math.pow(10,2))/Math.pow(10,2);
return result; } //绘制标签、网格线
function create_label_grid()
{
//创建标签
var temp;
var y_position;
for(var i=0;i<=y_steps;i++)
{
temp=y_min+y_value_per_step*i;//标签数值
y_position=(height-bottom_blank)-i*ystep;//标签y轴位置
var temp_obj=document.createElement("");
temp_obj.innerHTML=""+temp+"%";
document.getElementById("group1").insertBefore(temp_obj);
}
var temp_obj=document.createElement("");
temp_obj.innerHTML="比率";
document.getElementById("group1").insertBefore(temp_obj); //创建网格线
var x1,y1,x2,y2,point1,point2;
for(var i=0;i<=y_steps;i++)
{
var y1=top_blank+i*ystep;
point1=left_blank+","+y1;
point2=(width-right_blank)+","+y1;
var tempLine = document.createElement("");
document.getElementById("group1").insertBefore(tempLine);
}
}
var color1="red";
var color2="green";
var color3="yellow";
var color4="navy"; //绘图
function create_bar(arg1,arg2,arg3)
{
//(组别、第?条、值)
if(arg1==null||arg1>10) { return; }
if(arg2==null||arg2>4) { return; }
if(arg3==null){ return; }
if(arg3<0||arg3>100){ return; }
var i=arg3/y_value_per_step;//顶部位置
var h=arg3*(height-bottom_blank-top_blank)/(y_max-y_min);//高度
var l=left_blank+(parseInt(arg1)*5-4+arg2-1)*bar_width;//左位置
var bar_color=color1; //颜色
if(arg2==1)
{
bar_color=color1;
}
else if(arg2==2)
{
bar_color=color2;
}else if(arg2==3)
{
bar_color=color3;
}else if(arg2==4)
{
bar_color=color4;
} var temp_id=arg1+"_"+arg2; //绘图
var bar=document.createElement("");
var fill_obj=document.createElement("");//渲染层
bar.insertBefore(fill_obj);
group1.insertBefore(bar); //建立隐藏层
var div_obj=document.createElement("");
div_obj.innerHTML=arg3;
document.getElementById("group1").insertBefore(div_obj); } //绘制x轴标签
function create_x_label(arg1,arg2)
{
//绘制x轴标签
if(arg1==null){ return;
}
if(arg2==null){ return; }
if(arg1>10){ return; }
var x_position=label_left+arg1*(bar_width*5);
var temp_obj=document.createElement("");
temp_obj.innerHTML=""+arg2+"";
document.getElementById("group1").insertBefore(temp_obj);
} //绘制右侧标签
function create_right_label()
{
for(var i=1;i<=4;i++)
{
//右侧标签 var temp="";
var temp_obj=null;
var y_position=i*20+20;
var this_color="red";
if(i==1)
{
temp="日";
this_color=color1;
}else if(i==2)
{
temp="月";
this_color=color2;
}else if(i==3)
{
temp="季";
this_color=color3;
}else if(i==4)
{
temp="年";
this_color=color4;
}
temp_obj=document.createElement("");
document.getElementById("group1").insertBefore(temp_obj);
temp_obj=document.createElement("");
temp_obj.innerHTML=""+temp+"";
document.getElementById("group1").insertBefore(temp_obj);
}
}
//绘制标题
function create_tile(arg)
{
if(arg==null)
{
arg="电 压 合 格 率 统 计 图";
}
var title_left=width/2-150;
var title_top=10;
var tempObj = document.createElement("");
tempObj.innerHTML =arg;
document.getElementById("group1").insertBefore(tempObj);
} //***********************************调用入口************************************
function main()
{
init();//绘图区初始化
create_label_grid();//绘制标签、网格
create_right_label();//绘制右侧标签
create_tile(null);//绘制标题
create_curve();//绘制柱状图
}
function create_curve()
{
for(var i=1;i<=120;i++)
{
for(var j=1;j<5;j++)
{
var temp=100*Math.random();
create_bar(i,j,temp);
}
var name="第"+i+"组";
create_x_label(i,name);
}
}