http://www.walterzorn.com/jsgraphics/jsgraphics_e.htmDraw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript

解决方案 »

  1.   

    用Javascript和DHTML构建的矢量图形库 
    http://dev.csdn.net/article/26/26606.shtmJavascript:图形库wz_jsgraphics.js
    http://zealot.yculblog.com/post.36070.html更多
    http://www.walterzorn.com/
      

  2.   

    没有时间,项目催得紧,就想用javascript来画图。另外javascript能直接在网页上画图么?还是必须用某个控件?
      

  3.   

    标记  学习1.http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
    2.http://dev.csdn.net/article/26/26606.shtm
    3.http://zealot.yculblog.com/post.36070.html
    4.http://www.walterzorn.com/
      

  4.   

    要用vml的,否则不行啊!!
    <HTML>
    <HEAD>
    <TITLE>饼图</TITLE>
    <script>
    function DrawPieChart() 
    {
    var totalvalue = value1.value/360 + value2.value/360 + value3.value/360 + value4.value/360;
    var per1 = value1.value/totalvalue;
    var per2 = value2.value/totalvalue;
    var per3 = value3.value/totalvalue;
    var per4 = value4.value/totalvalue; var per12 = per1 + per2;
    var per123 = per1 + per2 + per3;Chart.innerHTML = "<OBJECT ID='PieChart' CLASSID='CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6' STYLE='position:relative;top:0;left:0;width:400;height:400'><PARAM NAME='Line0001' VALUE='SetLineColor(255, 0, 127)'><PARAM NAME='Line0002' VALUE='SetFillStyle(1)'><PARAM NAME='Line0003' VALUE='SetFillColor(0, 255, 80)'><PARAM NAME='Line0004' VALUE='Pie(-100, -100, 200, 200, 0, "+ per1 +", 0)'><PARAM NAME='Line0005' VALUE='SetFillStyle(1)'><PARAM NAME='Line0006' VALUE='SetFillColor(0, 0, 255)'><PARAM NAME='Line0007' VALUE='Pie(-100, -100, 200, 200, "+ per1 + ", " + per2 + ", 0)'><PARAM NAME='Line0008' VALUE='SetFillStyle(1)'><PARAM NAME='Line0009' VALUE='SetFillColor(0, 128, 128)'><PARAM NAME='Line0010' VALUE='Pie(-100, -100, 200, 200, "+per12+","+per3+", 0)'><PARAM NAME='Line0011' VALUE='SetFillStyle(1)'><PARAM NAME='Line0012' VALUE='SetFillColor(255, 0, 0)'><PARAM NAME='Line0013' VALUE='Pie(-100, -100, 200, 200, "+per123+","+per4+", 0)'></OBJECT>"}
    </script>
    <style>
    <!--
    body, p, div,td,input{font:menu;line-height: 150%}
    .div { font-family: 宋体; font-size: 12px; line-height: 150% }
    -->
    </style>
    </HEAD>
    <BODY>
    <table border=1 width=100%>
    <tr><td id="Chart" width=50% height=400 align=center>
    准备画图</td>
    <td width=50%>
    <p align=center>
    输入4个数<br>
    <input id="value1" type=text size=6 value=0>
    <input id="value2" type=text size=6 value=0>
    <input id="value3" type=text size=6 value=0>
    <input id="value4" type=text size=6 value=0>
    </p>
    <p align=center>
    <input type=button onclick="DrawPieChart()" value="画饼图">
    </p>
    </td>
    </tr>
    </table>
    </BODY>
    </HTML>看看这个对你有帮助吗?
      

  5.   

    <HTML xmlns:v> 
    <HEAD> 
    <META http-equiv="Content-Type" content="text/html; Charset=gb2312"> 
    <TITLE>vml</TITLE> 
    <STYLE> 
    body{} 
    a{} 
    a:hover{} 
    v\:*{behavior:url(#default#VML);} 
    </STYLE> 
    </HEAD> 
    <BODY bgcolor="" text="" topmargin="" leftmargin=""> 
    <BASE target=""> <v:Line strokeweight='2' to='400,0'> 
    <v:Stroke dashstyle='longdashdot' endarrow='open' id='style1'/> 
    </v:line>&nbsp;<p> <v:Line strokeweight='2' to='400,0'> 
    <v:Stroke endarrow='open' linestyle='thinthick ' id='style2'/> 
    </v:line> <script>
    var array1=new Array('dash','dashdot','dot','longdash','longdashdot','shortdash','shortdashdot','shortdashdotdot','longdashdotdot','shortdot') 
    var array2=new Array('block','classic','diamond','open','oval') 
    setInterval('style1.dashstyle=array1[Math.round(Math.random()*9)]',100) 
    setInterval('style2.endarrow=array2[Math.round(Math.random()*5)];style2.startarrow=array2[Math.round(Math.random()*5)]',100) 
    </script> </BODY> 
    </HTML>
      

  6.   

    用vml吧,不过需要学习一段时间
    一个简单例子
    <HTML xmlns:v>
    <HEAD>
    <STYLE>
    v\:*{behavior:url(#default#VML);}
    </STYLE>
    </HEAD>
    <BODY >
    <v:line id=fyw0 style="Z-INDEX:1001;LEFT:454px;POSITION:absolute;TOP:127px" from="0,0" to="-42.75pt,143.25pt" strokecolor="black" strokeweight="1pt">
    </v:line>
    </BODY>