javascript 在客户端绘制图表系列一——饼图

      希望转载，或引用我blog资源保留作者信息。——算了，显然那也是不大可能的。我前不就在其他blog还发现了和我写的一摸一样的文章，虽然我写的自认为还是比较臭，但是没有人喜欢看到自己花了精力的总结，被人毫不分析，毫不处理，毫不掩饰的改上他的大名。在blogjava也发现过，啥都没有改。就作者名字改了，和写的时间晚点，有些估计是我的有缘人，就晚几个小时——也许还真是和我想的一摸一样了。我也常用别人资源（不过性质没有这么恶劣罢了），所以不废话了，必定分享知识和分享苹果是不一样的。呵呵，发现自己废话还真不少哦。

上手JFreeChart
http://www.blogjava.net/JAVA-HE/archive/2007/04/18/111439.aspx

报表使用经验、技巧大总结（包括JFreechart、JS chart以及自己的使用经验）

http://www.blogjava.net/JAVA-HE/archive/2007/05/08/115813.html

这是我前面写的两篇关于客户端报表的总结，有需要的朋友可以参考参考。下面总结的是自己扩展封装的一个绘制饼图javascript class。

 

  1 /**/ /* ************更多技术文章请访问：http://www.blogjava.net/JAVA-HE****************
  2  *
  3  *    文件名：pie.js V 1.01
  4  *    
  5  *    作  者：何昌敏
  6  *
  7  *    时  间：2007-6
  8  *
  9  *    描  述：绘制饼图
 10  *
 11  *    备  注：
 12  *                1.修改数据转化为像素<1 像素时候，出现的图形走样bug。
 13  *                2.实现换行可设置。
 14  *                3.实现是否将说明图标居右。
 15  *                4.实现阴影绘制可选。
 16  *                5.实现比较严格的参数判断。
 17  *                6.可选择显示百分比的。
 18  *                7.实现了图像清除。
 19  *                8.调整startx starty能实现整体位置调整。
 20  *
 21  *    感  谢：Walter Zorn提供了API ——wz_jsgraphics.js v. 3.01。
 22  *                
 23 *************更多技术文章请访问：http://www.blogjava.net/JAVA-HE*************** */
 24 function  Pie(_div)
 25 {
 26      var  piejg  =   new  jsGraphics(_div);
 27      var  colors  =   new  Array(); 
 28     colors[ 9 ]  =   " #0066FF " ;
 29     colors[ 5 ]  =   " #996633 " ;
 30     colors[ 2 ]  =   " #80bb80 " ;
 31     colors[ 3 ]  =   " #FF0066 " ;
 32     colors[ 4 ]  =   " #9900FF " ;
 33     colors[ 6 ]  =   " #006633 " ;
 34     colors[ 1 ]  =   " #8080FF " ;
 35     colors[ 7 ]  =   " #000000 " ;
 36     colors[ 8 ]  = " #CCFFFF " ;
 37     colors[ 0 ]  =   " #FF8080 " ;
 38     colors[ 10 ]  =   " #066600 " ;
 39     colors[ 11 ]  = " #666666 " ;
 40     
 41      this .start_x  =   0 ;
 42      this .start_y  =   0 ;
 43      this .width =   100 ;
 44      this .height =   100 ;
 45      this .desc_distance  =   80 ;
 46      this .desc_width  =   10 ;
 47      this .desc_height =   10 ;
 48      this .IsShowPercentage  = true ;
 49      this .IsShowShadow  = true ;
 50      this .IsDescRight = true ;
 51      this .nextRow  =   2 ;
 52     
 53      this .drawPie  = function  (y_value,x_value)
 54      {
 55          if ( this .IsShowShadow)
 56          {
 57             piejg.setColor( " #666666 " );
 58             piejg.fillEllipse( this .start_x + 5 ,  this .start_y + 5 ,  this .width,     this .height);
 59       piejg.setColor( " #CCFFFF " );
 60             piejg.fillEllipse( this .start_x,  this .start_y,  this .width,     this .height);
 61         }
 62          var  Percentage  =   new  Array();
 63          var  y_len  =  y_value.length;
 64          var  x_len  =  x_value.length;
 65          var  sum  =   0 ;
 66          var  perspective   =   new  Array();
 67          var  begin_perspective  =   0 ;
 68          var  end_perspective  =   0 ;
 69         
 70          if (y_len  !=  x_len)
 71          {
 72             alert( " X and Y length of inconsistencies, errors parameters. " );
 73              return ;
 74         }
 75          for ( var  i  =   0 ; i < y_len;i ++ )
 76          {
 77             sum += y_value[i];
 78         }
 79          for  ( var  i  =   0 ; i < y_len;i ++ )
 80          {
 81              if (isNaN(y_value[i]))
 82              {
 83                 alert( " y is not a number! " );
 84                  return ;
 85             }
 86             perspective[i]  =  Math.max(Math.round( 360 * y_value[i] / sum), 1 );
 87             Percentage[i]  = Math.round( 100 * y_value[i] / sum);
 88             end_perspective  += perspective[i];
 89              if (i == 0 )
 90              {
 91                 piejg.setColor(colors[i]); 
 92                 piejg.fillArc( this .start_x, this .start_y, this .width, this .height,  0 , end_perspective); 
 93             }
 94              else
 95              {    
 96                 begin_perspective  +=  perspective[i - 1 ];
 97                 piejg.setColor(colors[i]); 
 98                 piejg.fillArc( this .start_x, this .start_y, this .width, this .height, begin_perspective, end_perspective); 
 99             }
100             
101         }
102          var  temp_x  =   0 ;
103          var  temp_y  =   0 ;
104          if ( this .IsDescRight)
105          {
106              for ( var  i  =   0  ;i < x_len;i ++ )
107              {
108                 temp_x  =   this .width + 10 + this .start_y;
109                 temp_y  =   this .start_y + (i - x_len / 2 + 1 / 2 ) * ( this .height / x_len) + this .height / 2 ;
110                  // temp_y = this.start_y+(i+1)*(this.height/x_len);
111                 piejg.setColor(colors[i]);
112                 piejg.fillRect(temp_x,temp_y, this .desc_width, this .desc_height);  
113                  if ( this .IsShowPercentage)
114                  {
115                     piejg.drawString(x_value[i] + " [ " + Percentage[i] + " %] " ,temp_x + this .desc_width,temp_y); 
116                 } else
117                  {
118                     piejg.drawString(x_value[i],temp_x + this .desc_width,temp_y); 
119                 }         
120             }
121         }
122          else
123          {
124              for ( var  i  =   0  ;i < x_len;i ++ )
125              {
126                 temp_x  =  i * this .desc_distance + this .start_x;
127                 temp_y  =   this color: #00000

分享到：

javascript 在客户端绘制图表系列二——柱 ... | JAVASCRIPT 千位分隔符

• 2007-06-29 01:39
• 浏览 792
• 评论(0)
• 查看更多