VML柱状图、曲线图的代码

好像很多人要这两个东西，上次貌似忘了发代码，补上：

第一个是柱状图的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>柱状图</title>
    <STYLE>
        v\:* { BEHAVIOR: url(#default#VML) }
        /*标题显示样式*/
        .Title {
            font-family:"宋体", "华文仿宋";
            font-size:16px;
            text-align:center;
            font-weight:bold;
            color:#996600;
            vertical-align:middle;
        }
    </STYLE>
    <script type="text/javascript">
        /* 说明: javascript/vml 曲线图
         * 作者：大漠穷秋
         * 日期：2008-05-12
         * 公司：华瑞电气
         * QQ:253445528
         * 邮箱：damoqiongqiu@126.com
         * 申明：转载，使用，修改请保存版权申明
         */
            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("<v:line id='y_axis' from='("+left_blank+","+(height-bottom_blank)+")' to='("+left_blank+","+(top_blank-20)+")' strokeColor='red' strokeweight='1' style='Z-INDEX:9;POSITION:relative'/>");
                y_axis.insertBefore(document.createElement("<v:stroke EndArrow='classic' />"));
                group1.insertBefore(y_axis);

//x轴
                var x_axis=document.createElement("<v:line id='y_axis' from='("+left_blank+","+(height-bottom_blank)+")' to='("+(width-right_blank)+","+(height-bottom_blank)+")' strokeColor='red' strokeweight='1' style='Z-INDEX:9;POSITION:relative'/>");
                x_axis.insertBefore(document.createElement("<v:stroke EndArrow='classic' />"));
                group1.insertBefore(x_axis);

                //提示线
                var tip_line=document.createElement("<v:line id='line1' from='("+left_blank+",0)' to='("+left_blank+","+height+")' strokeColor='black' strokeweight='1' style='Z-INDEX:30;POSITION:relative'/>");
                group1.insertBefore(tip_line);
                //提示框
                var tip_box=document.createElement("<v:Rect id='msg_box'fillcolor='#C4E1FF' strokeColor='black' style='Z-INDEX:30;position:relative;width:60;height:20;left:80;top:40' filled=t/>");
                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="<p><font size=2 color='blue'> "+temp_value+"</font>";

                    if(line_in<width-right_blank-box_width-10){
                        msg_box.style.left=line_in+5;
                    }else{
                        msg_box.style.left=line_in-box_width;
                    }

                    if(top_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);
                    resultresult=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("<v:textbox id='text_box' style='font-size:15;z-index:9;left:"+label_left+";color:black;word-break:break-all;position:absolute;top:"+y_position+"'></v:textbox>");
                    temp_obj.innerHTML="<font size=1>"+temp+"%</font>";
                    document.getElementById("group1").insertBefore(temp_obj);
                }

                var temp_obj=document.createElement("<v:textbox style='font-size:15;z-index:9;left:"+(label_left)+";color:black;word-break:break-all;position:absolute;top:"+(top_blank-20)+"'></v:textbox>");
                temp_obj.innerHTML="<font color='navy'>比率</font>";
                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("<v:line from='"+point1+"' to='"+point2+"' strokeColor='#CCCCCC' style='Z-INDEX:7;POSITION:relative'/>");
                    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("<v:Rect fillcolor='"+bar_color+"' strokeColor='black' style='Z-INDEX:10;position:relative;width:"+bar_width+";height:"+h+";left:"+l+";top:"+(height-bottom_blank-i*ystep)+"' filled=t/>");
                var fill_obj=document.createElement("<v:fill type='frame' opacity='.7'/>");//渲染层
                bar.insertBefore(fill_obj);
                group1.insertBefore(bar);

                //建立隐藏层
                var div_obj=document.createElement("<div id="+temp_id+" style='visibility:hidden;left:1100;top:-40;position:relative;'/>");
                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("<v:textbox style='font-size:15;z-index:9;left:"+x_position+";color:black;word-break:break-all;position:absolute;top:"+(height-bottom_blank)+"'></v:textbox>");
                temp_obj.innerHTML="<font size=1>"+arg2+"</font>";
                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("<v:rect fillcolor='"+this_color+"' filled=t strokeColor='black' strokeweight='1' style='width:10;height:10;z-index:9;left:"+(width-right_blank)+";color:black;position:absolute;top:"+y_position+"'></v:rect>");
                    document.getElementById("group1").insertBefore(temp_obj);

                    temp_obj=document.createElement("<v:textbox id='right_text_box' style='font-size:15;z-index:9;left:"+(width-right_blank+15)+";color:black;word-break:break-all;position:absolute;top:"+y_position+"'></v:textbox>");
                    temp_obj.innerHTML="<font size=1>"+temp+"</font>";
                    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("<div class=\"Title\" style=\"POSITION:absolute;Z-INDEX:8;visibility:visible;LEFT:"+title_left+";TOP:"+title_top+";width:"+350+";height:"+20+";/>");
                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);
                }
            }
    </script>
</head>
<body onload="main()">
        <div id="curve" style='position:absolute' onmousemove='moveline()'>
            <v:group id='group1' style='position:relative;top:0;left:0'
                coordorigin='0,0'>
                
                <v:Rect id="back_ground" fillcolor='white' style='position:relative'>
                    <v:fill rotate='t' type='gradient' color2='#C4E1FF' />
                    
                    <v:shadow on='t' type='single' color='silver' offset='3pt,3pt' />
                    
                </v:rect>
            </v:group>
        </div>
</body>
</html>

第二个是曲线图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Thinking in VML</title>
        <script language="javascript">
        /* 说明: javascript/vml 曲线图
         * 作者：大漠穷秋
         * 日期：2008-04-08
         * 公司：华瑞电气
         * QQ:253445528
         * 邮箱：damoqiongqiu@126.com
         * 申明：转载，使用，修改请保存版权申明
         */
            var y_min=-200;//标签最小值
            var y_max=1000;//标签最大值
            var y_value_per_step=200;//标签步长
            var y_steps=(y_max-y_min)/y_value_per_step;//标签总步数
            var x_steps=288;//x轴步数

            var div_left=100;//层边距
            var div_top=100;//层高距

            var width=800;//视图区宽度
            var height=400;//视图区高度
            var left_blank=80;//左边距
            var right_blank=80;//右边距
            var top_blank=40;//上边距
            var bottom_blank=20;//下边距

            var label_left=40;//标签左边距

            var xstep=(width-left_blank-right_blank)/x_steps;//x每步像素数
            var ystep=(height-top_blank-bottom_blank)/y_steps;//y每步像素数

            //曲线数值
            var x_values1=new Array();
            var y_values1=new Array();
            //曲线数值的上下边界
            var up_temp=700;
            var down_temp=300;

            //参数初始化
            function param_init(arg1,arg2){
                //alert(arg1);
                //alert(arg2);
                /*
                if(arg1==null){
                    return;
                }
                if(arg2==null){
                    return;
                }
                //设置上下限
                up_temp=arg1;
                down_temp=arg2;

                if((Math.abs(arg1)<1)&&(Math.abs(arg2)<1)){
                    y_max=1;
                    y_min=-1;
                    y_value_per_step=0.1;
                    y_steps=Math.abs(y_max-y_min)/y_value_per_step;
                    xstep=(width-left_blank-right_blank)/x_steps;
                    ystep=(height-top_blank-bottom_blank)/y_steps;
                    return;
                }
                if((Math.abs(arg1)<1)&&(Math.abs(arg2)>1)){
                    return;
                }
                if((Math.abs(arg2)<1)&&(Math.abs(arg1)>1)){
                    return;
                }

                var temp1=parseInt(arg1);//去掉小数
                var temp2=parseInt(arg2);
                temp1=Math.abs(temp1);//去掉负号
                temp2=Math.abs(temp2);
                var temp1temp1_str=temp1.toString();//转成字符串
                var temp2temp2_str=temp2.toString();
                var temp1_len=temp1_str.length;//获取长度
                var temp2_len=temp2_str.length;
                //解析方法：对传入的数，取出其第二位，若第二位小于5，第二位为5，其余置零；若第二位大于5，第一位加1，其余位置零。
                var temp1_first_position=temp1_str.substring(0,1);
                var temp1_second_position=temp1_str.substring(1,2);
                var temp2_first_position=temp2_str.substring(0,1);
                var temp2_second_position=temp2_str.substring(1,2);

                var i=parseInt(temp1_first_position);
                var j=parseInt(temp1_second_position);
                var result1=0;
                if(arg1>0){
                    if(j<5){
                        j=5;
                    }
                    else if(j>=5){
                        ii=i+1;
                        j=0;
                    }
                    result1=i*Math.pow(10,(temp1_len-1))+j*Math.pow(10,(temp1_len-2));
                    y_max=result1;
                }else{
                    if(j<5){
                        ii=i-1;
                        j=0;
                    }
                    else if(j>=5){
                        j=0;
                    }
                    result1=i*Math.pow(10,(temp1_len-1))+j*Math.pow(10,(temp1_len-2));
                    y_max=(-1)*result1;
                }
                //alert(y_max);

                var m=parseInt(temp2_first_position);
                var n=parseInt(temp2_second_position);
                var result2=0;
                if(arg2>0){
                    if(n<5){
                        mm=m-1;
                        n=0;
                    }else{
                        n=0;
                    }
                    result2=m*Math.pow(10,(temp2_len-1))+n*Math.pow(10,(temp2_len-2));//第二个参数解析完成
                    y_min=result2;
                    y_value_per_step=5*Math.pow(10,(temp2_len-2));
                }else{
                    if(n<5){
                        n=5;
                    }
                    else if(n>=5){
                        mm=m+1;
                        n=0;
                    }
                    result2=m*Math.pow(10,(temp2_len-1))+n*Math.pow(10,(temp2_len-2));//第二个参数解析完成
                    y_min=(-1)*result2;

                    if(n==5){
                        y_value_per_step=5*Math.pow(10,(temp2_len-2));
                    }else{
                        y_value_per_step=Math.pow(10,(temp2_len-1));
                    }
                }
                //alert(y_min);

                //重置相关参数

                if(n==5){
                    y_value_per_step=5*Math.pow(10,(temp2_len-2));
                }else{
                    y_value_per_step=Math.pow(10,(temp2_len-1));
                }

                //alert(y_value_per_step);
                y_steps=Math.abs(y_max-y_min)/y_value_per_step;
                xstep=(width-left_blank-right_blank)/x_steps;
                ystep=(height-top_blank-bottom_blank)/y_steps;
                */
            }
            //绘图区初始化、重新设置
            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("<v:line id='y_axis' from='("+left_blank+","+(height-bottom_blank)+")' to='("+left_blank+","+(top_blank-20)+")' strokeColor='red' strokeweight='1' style='Z-INDEX:9;POSITION:relative'/>");
                y_axis.insertBefore(document.createElement("<v:stroke EndArrow='classic' />"));
                group1.insertBefore(y_axis);
                //提示线
                var tip_line=document.createElement("<v:line id='line1' from='("+left_blank+",0)' to='("+left_blank+","+height+")' strokeColor='red' strokeweight='1' style='Z-INDEX:9;POSITION:relative'/>");
                group1.insertBefore(tip_line);
                //提示框
                var tip_box=document.createElement("<v:Rect id='msg_box'fillcolor='#C4E1FF' strokeColor='red' style='Z-INDEX:10;position:relative;width:80;height:60;left:80;top:40' filled=t/>");
                group1.insertBefore(tip_box);

            }

            //绘制坐标轴、网格线
            function createGrid(){
                var x1,y1,x2,y2,point1,point2;
                //绘制x轴网格
                for(var i=0;i<=x_steps;i++){
                    point1=left_blank+xstep*i+","+top_blank;
                    point2=left_blank+xstep*i+","+(height-bottom_blank);
                    var tempLine = document.createElement("<v:line from='"+point1+"' to='"+point2+"' strokeColor='#CCCCCC' style='Z-INDEX:7;POSITION:relative'/>");
                    document.getElementById("group1").insertBefore(tempLine);
                }
                //绘制y轴网格
                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("<v:line from='"+point1+"' to='"+point2+"' strokeColor='#CCCCCC' style='Z-INDEX:7;POSITION:relative'/>");
                    document.getElementById("group1").insertBefore(tempLine);
                }

                //动态绘制x轴
                if(y_max>0&&y_min<=0){
                    var temp;
                    var y_position;
                    var point1;
                    var point2;
                    for(var i=0;i<=y_steps;i++){
                        temp=y_min+y_value_per_step*i;//标签数值
                        y_position=(height-bottom_blank)-i*ystep;//标签y轴位置
                        point1=left_blank+","+y_position;
                        point2=(width-right_blank+10)+","+y_position;

                        if(temp==0){
                            var tempLine = document.createElement("<v:line from='("+point1+")'to='("+point2+")' strokeColor='red' strokeweight='1' style='Z-INDEX:8;POSITION:relative'/>");
                            document.getElementById("group1").insertBefore(tempLine);
                            tempLine.insertBefore(document.createElement("<v:stroke EndArrow='classic'/>"));
                            //x轴单位
                            temp_obj=document.createElement("<v:textbox style='font-size:15;z-index:9;left:"+(width-right_blank+5)+";color:black;word-break:break-all;position:absolute;top:"+(y_position+5)+"'></v:textbox>");
                            temp_obj.innerHTML="<font color='navy'>时间t</font>";
                            document.getElementById("group1").insertBefore(temp_obj);
                            break;
                        }
                    }
                }else if(y_min>0){//在底部绘制坐标轴
                    var point1;
                    var point2;
                    point1=left_blank+","+(height-bottom_blank);
                    point2=(width-right_blank+10)+","+(height-bottom_blank);

                    var tempLine = document.createElement("<v:line from='("+point1+")'to='("+point2+")' strokeColor='red' strokeweight='1' style='Z-INDEX:8;POSITION:relative'/>");
                    document.getElementById("group1").insertBefore(tempLine);
                    tempLine.insertBefore(document.createElement("<v:stroke EndArrow='classic'/>"));

                    //x轴单位
                    temp_obj=document.createElement("<v:textbox style='font-size:15;z-index:9;left:"+(width-right_blank+5)+";color:black;word-break:break-all;position:absolute;top:"+(height-bottom_blank+5)+"'></v:textbox>");
                    temp_obj.innerHTML="<font color='navy'>时间t</font>";
                    document.getElementById("group1").insertBefore(temp_obj);
                }else if(y_max<0){//在顶部绘制坐标轴
                    var point1;
                    var point2;
                    point1=left_blank+","+top_blank;
                    point2=(width-right_blank+10)+","+top_blank;

                    var tempLine = document.createElement("<v:line from='("+point1+")'to='("+point2+")' strokeColor='red' strokeweight='1' style='Z-INDEX:8;POSITION:relative'/>");
                    document.getElementById("group1").insertBefore(tempLine);
                    tempLine.insertBefore(document.createElement("<v:stroke EndArrow='classic'/>"));

                    //x轴单位
                    temp_obj=document.createElement("<v:textbox style='font-size:15;z-index:9;left:"+(width-right_blank+5)+";color:black;word-break:break-all;position:absolute;top:"+(top_blank-10)+"'></v:textbox>");
                    temp_obj.innerHTML="<font color='navy'>时间t</font>";
                    document.getElementById("group1").insertBefore(temp_obj);
                }
            }

            //绘制标签
            function createLabel(){
                var temp;
                var y_position;
                for(var i=0;i<=y_steps;i++){
                    temp=format(y_min+y_value_per_step*i,3);//标签数值
                    y_position=(height-bottom_blank)-i*ystep;//标签y轴位置
                    var temp_obj=document.createElement("<v:textbox id='text_box' style='font-size:15;z-index:9;left:"+label_left+";color:black;word-break:break-all;position:absolute;top:"+y_position+"'></v:textbox>");
                    temp_obj.innerHTML="<font size=1>"+temp+"</font>";
                    document.getElementById("group1").insertBefore(temp_obj);
                }

                var temp_obj=document.createElement("<v:textbox style='font-size:15;z-index:9;left:"+(label_left-20)+";color:black;word-break:break-all;position:absolute;top:"+(top_blank-20)+"'></v:textbox>");
                temp_obj.innerHTML="<font color='navy'>单位:kv</font>";
                document.getElementById("group1").insertBefore(temp_obj);
            }

            //绘制标题
            function createTitle(){
                var title_left=width/2-150;
                var title_top=10;
                var tempObj = document.createElement("<div class=\"Title\" style=\"POSITION:absolute;Z-INDEX:8;visibility:visible;LEFT:"+title_left+";TOP:"+title_top+";width:"+300+";height:"+20+";/>");
                tempObj.innerHTML ="2008-04-07 黄棠村首";
                document.getElementById("group1").insertBefore(tempObj);
            }


            //***********************************接受传入数据、绘制曲线***********************************
            //绘图
            function createLine(color){
                var line_color=color;//曲线颜色
                if(line_color==null){
                    line_color="blue";
                }

                var x1,y1,x2,y2,point1,point2;

                for(var i=0;i<x_steps;i++){
                    x1=x_values1[i];
                    x2=x_values1[i+1];

                    y1=y_values1[i];
                    y2=y_values1[i+1];

                    if(x1!=null&&x2!=null&&y1!=null&&y2!=null){
                        x1=x_data_format(x1);
                        x2=x_data_format(x2);

                        y1=y_data_format(y1);
                        y2=y_data_format(y2);


                        var x_temp1=get_x(x1);
                        var x_temp2=get_x(x2);

                        var y_temp1=get_y(y1);
                        var y_temp2=get_y(y2);

                        point1=x_temp1+","+y_temp1;
                        point2=x_temp2+","+y_temp2;

                        var tempLine = document.createElement("<v:line from='"+point1+"'to='"+point2+"' strokeColor='"+line_color+"' strokeweight='2' style='Z-INDEX:8;POSITION:relative'/>");
                        document.getElementById("group1").insertBefore(tempLine);
                    }
                }
                /*
                if(x_values1.length==0&y_values1.length==0){
                    var temp_obj=document.createElement("<v:textbox style='font-size:20;z-index:9;left:"+350+";color:blue;word-break:break-all;position:absolute;top:"+200+"'></v:textbox>");
                    temp_obj.innerHTML="没有数据";
                    document.getElementById("group1").insertBefore(temp_obj);
                }
                */
            }

            //工具函数……格式化传入的曲线y值，超过标签范围的值全部置为标签最大/最小值
            function y_data_format(value){
                var result;
                if(value>=y_max){
                    result=y_max;
                    //alert();
                }else if(value<=y_min){
                    result=y_min
                }
                else{
                    result=value;
                }
                return result;
            }
            //工具函数……格式化传入的曲线y值，超过x范围的值全部置为x轴最大/最小值
            function x_data_format(value){
                var result;
                if(value<0){
                    result=0;
                }
                else if(value>x_steps){
                    result=x_steps;
                }
                else{
                    result=value;
                }
                return result;
            }

            //工具函数……获取x值对应图中的x像素值
            function get_x(value){
                var temp=left_blank+value*xstep;
                return temp;
            }
            //工具函数……获取y值对应途中的y像素值
            function get_y(value){
                var temp=(height-bottom_blank-top_blank)/(y_max-y_min);//每像素代表的y值
                var result=height-bottom_blank-(value-y_min)*temp;
                return result;
            }
            //工具函数……数据精度格式化
            function format(source,n){
                var val=Math.round(source*Math.pow(10,n))/Math.pow(10,n);
                return parseFloat(val);
            }

            //主函数
            function main(up_limit,down_limit){
                param_init(800.304,-320.24);//参数初始化
                init();//绘图区初始化
                createGrid();//绘制网格
                createLabel();//绘制y轴刻度标签
                createTitle();//绘制题图
                create_limit();//绘制上下限线
                create_line();//绘图
            }

            //接受传入值、绘制曲线
            function create_line(xvalues,yvalues){
                for(var i=0;i<=x_steps;i++){
                    x_values1[i]=i;
                    y_values1[i]=300*Math.random()+350;
                }
                createLine("green");
            }

            //***********************************提示线、提示框鼠标跟随***********************************
            //鼠标位置内部值=(当前鼠标真实位置-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 x_value_temp=cal_x(line_in);
                    var x_index=get_x_index(x_value_temp);
                    msg_box.innerHTML="<font size=2>"+get_time(x_value_temp)+"</font><br><font size=2 color='blue'>"+find_y(x_index)+"</font>";

                    if(line_in<width-right_blank-box_width-10){
                        msg_box.style.left=line_in+5;
                    }else{
                        msg_box.style.left=line_in-box_width;
                    }

                    if(top_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;
                        }
                    }
                }
            }

            //根据当前像素值计算x值
            function cal_x(line_in){
                var result=parseInt((line_in-left_blank)/xstep);
                return result;
            }
            //根据x值查找对应索引
            function get_x_index(value){
                if(x_values1.length==0){//没有值
                    return "";
                }
                for(var i=0;i<x_steps;i++){
                    if(x_values1[i]!=null){
                        var temp=x_values1[i];
                        if(temp==value){
                            return i;
                        }
                    }
                }
                return "";
            }
            //查找x处对应的y值
            function find_y(index){
                var result=y_values1[index];
                if(result==null){//没有值
                    result="";
                }else{
                    resultresult=result+"kv";//单位kv
                }
                return result;
            }
            //根据x值计算时间
            function get_time(x_value){
                var all=x_value*5;
                return parseInt(all/60)+"时"+all%60+"分";
            }

            //绘制上下限线
            function create_limit(){
                var limit_textbox_left=width-right_blank+10;
                var limit_rect_left=limit_textbox_left-10;

                //上限线、标签
                var point1=left_blank+","+get_y(up_temp);
                var point2=(width-right_blank)+","+get_y(up_temp);
                var div_obj=document.createElement("<div id='up'style='visibility:visiable'/>");
                var tempLine = document.createElement("<v:line from='"+point1+"'to='"+point2+"' strokeColor='blue' strokeweight='1' style='Z-INDEX:8;POSITION:relative'/>");
                div_obj.insertBefore(tempLine);
                document.getElementById("group1").insertBefore(div_obj);

                var temp_obj=document.createElement("<v:textbox style='font-size:15;z-index:9;left:"+limit_textbox_left+";color:black;word-break:break-all;position:absolute;top:"+50+"'></v:textbox>");
                temp_obj.innerHTML="<font color='navy'>上限"+up_temp+"</font>";
                document.getElementById("group1").insertBefore(temp_obj);

                temp_obj=document.createElement("<v:rect id='up_mark' onclick='hide_line(\"up\")' fillcolor='blue' filled=t strokeColor='red' strokeweight='1' style='width:10;height:10;z-index:9;left:"+limit_rect_left+";color:black;position:absolute;top:"+50+"'></v:rect>");
                document.getElementById("group1").insertBefore(temp_obj);

                //下限线、标签
                point1=left_blank+","+get_y(down_temp);
                point2=(width-right_blank)+","+get_y(down_temp);
                div_obj=document.createElement("<div id='down'style='visibility:visiable'/>");
                tempLine = document.createElement("<v:line id='down' from='"+point1+"'to='"+point2+"' strokeColor='blue' strokeweight='1' style='Z-INDEX:8;POSITION:relative'/>");
                div_obj.insertBefore(tempLine);
                document.getElementById("group1").insertBefore(div_obj);

                temp_obj=document.createElement("<v:textbox style='font-size:15;z-index:9;left:"+limit_textbox_left+";color:black;word-break:break-all;position:absolute;top:"+70+"'></v:textbox>");
                temp_obj.innerHTML="<font color='navy'>下限"+down_temp+"</font>";
                document.getElementById("group1").insertBefore(temp_obj);

                temp_obj=document.createElement("<v:rect id='down_mark' onclick='hide_line(\"down\")'fillcolor='blue' filled=t strokeColor='red' strokeweight='1' style='width:10;height:10;z-index:9;left:"+limit_rect_left+";color:black;position:absolute;top:"+70+"'></v:rect>");
                document.getElementById("group1").insertBefore(temp_obj);

            }

            var up_flag=true;
            var down_flag=true;
            //隐藏曲线
            function hide_line(id,mark){
                var obj=document.getElementById(id);
                var obj2;
                if(id=="up"){
                    obj2=document.getElementById("up_mark");
                    if(up_flag){
                        obj.style.visibility="hidden";
                        obj2.filled=false;
                        up_flag=false;
                    }else{
                        obj.style.visibility="visible";
                        obj2.filled=true;
                        up_flag=true;
                    }
                }
                if(id=="down"){
                    obj2=document.getElementById("down_mark");
                    if(down_flag){
                        obj.style.visibility="hidden";
                        obj2.filled=false;
                        down_flag=false;
                    }else{
                        obj.style.visibility="visible";
                        obj2.filled=true;
                        down_flag=true;
                    }
                }
            }
        </script>
    </head>

    <STYLE>
     v\:* { BEHAVIOR: url(#default#VML) }
     /*标题显示样式*/
        .Title {
            font-family:"宋体", "华文仿宋";
            font-size:16px;
            text-align:center;
            font-weight:bold;
            color:#996600;
            vertical-align:middle;
        }
    </STYLE>

    <body onload="main()">
                <div id="curve" style='position:absolute' onmousemove='moveline()'>
                    <v:group id='group1' style='position:relative;top:0;left:0' coordorigin='0,0'>
                             
                             <v:Rect id="back_ground" fillcolor='white' style='position:relative'>
                                <v:fill rotate='t' type='gradient' color2='#C4E1FF'/>
                                <v:shadow on='t' type='single' color='silver' offset='3pt,3pt' />
                             </v:rect>
                    </v:group>
                </div>
    </body>
</html>

这两个东西稍微改改可以画出比较炫的图出来的，第二个曲线图搞了我一个星期左右啊，呵呵。

在jsp或者asp里面怎么用这两个东西就不要我说了吧？

还是稍微说下在jsp里面怎么调用绘曲线吧

把上面的代码保存成.jsp(废话)，然后引入你想要的JSTL标签库，或者你也可以用<%%>这个东西来写JAVA的东西

例如从后台传进来一个Collection或者数组，就可以用标签库把数组的值赋值给x_values1和y_values1这两个js的数组，分别对应x、y轴坐标

例如:

var counter=0;

</script>

<%
int[] result=(int[])request.getSession.getAttribute("name");

for(int i=0;i<288;i++){

int temp=result[i];

x_values1[counter]=counter;

y_values1[counter]="<%=temp%>";

counter++;

</script>

}

x,y赋值完成之后就可以调用create_line("blue")这个函数来绘制曲线了，参数是曲线的颜色

控件是可以同时绘制多条曲线的，你可以自己定义x_values2，y_values2等等

如果你想用标签库来把获取到的集合或者数组的值传给javascript，那么可以这么做（我自己的一个例子）：

<c:if test="${realdata!=null}">
        <script language="javascript" type="text/javascript">
            main("${realdata.upLimit}","${realdata.downLimit}");                    //指定数值上下限，自动解析标签上下限
            createTitle("${realdata.mpName}"+"${realdata.dateStr}"+" 实时曲线");        //绘制标题
        </script>
        <script language="javascript" type="text/javascript">
            var data_counter=0;                                                     //数据位数计数器
        </script>
        <c:forEach items="${realdata.dataArray}" var="data">
            <c:if test="${data>=0}">
                <script language="javascript" type="text/javascript">
                    x_values1[data_counter]=data_counter;                           //向脚本数组中压入实时值数组
                    y_values1[data_counter]="${data}";
                </script>
            </c:if>
            <script language="javascript" type="text/javascript">
                data_counter++;
            </script>
        </c:forEach>
        <script language="javascript" type="text/javascript">
            create_line("green");                                                   //绘制曲线
        </script>
    </c:if>
注意，以上是2.0的标签库，即jsp必须引入：

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

至于asp里面怎么调，不用再说了吧？

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/damoqiongqiu/archive/2008/11/20/3338845.aspx

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。