js chart

 

          在web开发中，经常会遇到需要作图展示的地方，常用的技术是jfreechart，她在服务器端生成图象，在前台展示，对于访问量巨大的网站，必然会加重服务器的负担，于是客户端绘图呼之欲出，典型的技术就是使用js。

          客户端使用js绘图主要用到一个开源的js组件wz_jsgraphics.js ，网上有人使用这个js封装了一些画线，饼图的js，我们就可以使用这些js在客户端作图了。

 

         写一个test.html （还要用到pie.js，bar.js，line.js）

<html > 
   <head>
   
   <title> TEST </title> 
   <script  type ="text/javascript"  src ="wz_jsgraphics.js"></script> 
   <script  type ="text/javascript"  src ="pie.js"></script> 
   <script  type ="text/javascript"  src ="bar.js"></script> 
   <script  type ="text/javascript"  src ="line.js"></script> 
  </head>
   <body > 
   <p>1.饼图</p> 
  <div  id ="PieDiv"  style ="position:relative;height:200px;width:300px;"></div> 
   <script  language ="javascript">  
      var  y =   new  Array ();
      y[0]  =   20000 ;
      y[1]  =   20000 ;
      y[2]  =   20000 ;
  
      var  x  =   new  Array ();
     x[0]  =   " a " ;
     x[1]  =   " b " ;
     x[2]  =   " c " ;
  
      var mypie =new  Pie( "PieDiv" );
     mypie.drawPie(y,x);
      // mypie.clearPie(); 
  </script> 
  
  
  <p>2.柱图</p>
<div id="BarDiv" style="position:relative;height:200px;width:500px;"></div>

<script language="javascript">
    var y= new Array ();
     y[0] = 11112;
     y[1] = 16000;
     y[2] = 20000;

    var x = new Array ();
    x[0] = "a";
    x[1] = "b";
    x[2] = "c";    
    var mybar = new Bar("BarDiv");
    mybar.drawBar(y,x);    
</script>    

<p> 3.线图 </p> 
  <div  id ="LineDiv"  style ="position:relative;height:200px;width:300px;"></div> 
	<script language ="javascript">  
      var  y =   new  Array ();
      y[0]  =   16000 ;
      y[1]  =   26000 ;
      y[2]  =   36000 ;
      y[3]  =   46000 ;
      y[4]  =   36000 ;
      y[5]  =   26000 ;
      var  x  =   new  Array ();
     x[0]  =   "12:01" ;
     x[1]  =   "12:02" ;
     x[2]  =   "12:03" ;
     x[3]  =   "12:04" ;
     x[4]  =   "12:05" ;
     x[5]  =   "12:06" ;
      var  myline  =   new  Line("LineDiv");
     myline.drawXYLine(y,x);
      // myline.clearLine(); 
  </script>         
  
     </body> 
  </html> 

 

效果：