用ASP.NET with C#绘制柱状图(Bar图)

昨天发了个绘制Curve图的,自古Curve图,Bar图,Pie图都不分家,今天就继续来绘制Bar图吧。照例图片拥有简单的缩放功能,来看看最终效果图:

Bar1.jpg

其实绘制Bar图比绘制Curve图更简单,只需要绘制相应比例的方块即可,来看看初始化函数InitializeGraph()吧:

 

None.gif              // 初始化和填充图像区域,画出边框,初始标题
None.gif
             private   void  InitializeGraph()
ExpandedBlockStart.gifContractedBlock.gif            
dot.gif {
InBlock.gif            
InBlock.gif                
//根据给定的高度和宽度创建一个位图图像
InBlock.gif
                objBitmap = new Bitmap(Width,Height);
InBlock.gif
InBlock.gif                
//从指定的 objBitmap 对象创建 objGraphics 对象 (即在objBitmap对象中画图)
InBlock.gif
                objGraphics = Graphics.FromImage(objBitmap);
InBlock.gif
InBlock.gif                
//根据给定颜色(LightGray)填充图像的矩形区域 (背景)
InBlock.gif
                objGraphics.DrawRectangle(new Pen(BorderColor,1),0,0,Width,Height);
InBlock.gif                objGraphics.FillRectangle(
new SolidBrush(BgColor),1,1,Width-2,Height-2);
InBlock.gif
InBlock.gif                
//初始化标题
InBlock.gif
                CreateTitle(ref objGraphics);
ExpandedBlockEnd.gif            }


相对Curve图是不是简单了好多?不用绘制麻烦的X轴Y轴,之需要填充一个简单的背景即可。爽吧?

呵呵,初始化标题:

None.gif              private   void  CreateTitle( ref  Graphics objGraphics)
ExpandedBlockStart.gifContractedBlock.gif            
dot.gif {
InBlock.gif                objGraphics.DrawString(Title,
new Font("宋体",16),new SolidBrush(TextColor),new Point(5,5));
ExpandedBlockEnd.gif            }


这时候生成的是一幅只有左上角有标题的空图片,我就不贴图了,下边绘制右上角的说明文字和相应的颜色表示方块:

None.gif              // 初始化右边说明部分
None.gif
             private   void  DrawRight( ref  Graphics objGraphics)
ExpandedBlockStart.gifContractedBlock.gif            
dot.gif {
InBlock.gif                objGraphics.DrawString(String.Format(
"单位:{0}",Unit),new Font("宋体",10),new SolidBrush(TextColor),Width-100,30);
InBlock.gif
InBlock.gif                Point KeysPoint 
= new Point(Width-95,50);
InBlock.gif                Point KeysTextPoint 
= new Point(Width-70,50);
InBlock.gif                
for(int i=0;i < Keys.Length;i++)
ExpandedSubBlockStart.gifContractedSubBlock.gif                
dot.gif{
InBlock.gif                    objGraphics.DrawRectangle(
new Pen(BorderColor,1),KeysPoint.X,KeysPoint.Y,21,11);
InBlock.gif                    objGraphics.FillRectangle(
new SolidBrush(GetColor(i)),KeysPoint.X,KeysPoint.Y,20,10);
InBlock.gif                    objGraphics.DrawString(Keys[i],
new Font("宋体",10),new SolidBrush(TextColor),KeysTextPoint);
InBlock.gif                    KeysPoint.Y 
+=15;
InBlock.gif                    KeysTextPoint.Y 
+= 15;
ExpandedSubBlockEnd.gif                }

ExpandedBlockEnd.gif            }


这时候图片除了具体的“柱子”外已经初始化完毕了:

如下:

Bar2.jpg

剩下只是绘制相应的“柱子”了,因为“柱子”要适应图片的大小自动放大缩小,所以这里要费些周章,先要找出数据中最大值,然后以该最大值的“柱子”绘制适应图片的最高的“柱子”,然后其他按照比例照着绘制就可以了,先找出最大值吧:

 

None.gif              // 获取数组的最大值
None.gif
             private   float  MaxValues( float [] Values)
ExpandedBlockStart.gifContractedBlock.gif            
dot.gif {
InBlock.gif                
float MaxValue = Values[0];
InBlock.gif                
for(int i = 0;i < Values.Length;i++)
ExpandedSubBlockStart.gifContractedSubBlock.gif                
dot.gif{
InBlock.gif                    
if(Values[i] > MaxValue)
ExpandedSubBlockStart.gifContractedSubBlock.gif                    
dot.gif{
InBlock.gif                        MaxValue 
= Values[i];
ExpandedSubBlockEnd.gif                    }

ExpandedSubBlockEnd.gif                }

InBlock.gif                
return MaxValue;
ExpandedBlockEnd.gif            }


万事俱备了,我们开始最后一步吧!

 

None.gif              // Bar图的主要部分
None.gif
             private   void  DrawContent( ref  Graphics objGraphics)
ExpandedBlockStart.gifContractedBlock.gif            
dot.gif {
InBlock.gif                Point KeysPoint 
= new Point(20,Height - 20);
InBlock.gif                Point KeysTextPoint 
= new Point(20,Height - 20);
InBlock.gif
InBlock.gif                
int SpaceWidth = (Width-120)/(Values.Length*2);
InBlock.gif                
float SpaceHeight;
InBlock.gif
InBlock.gif                
//画Bar
InBlock.gif
                for(int i=0;i < Values.Length;i++)
ExpandedSubBlockStart.gifContractedSubBlock.gif                
dot.gif{
InBlock.gif                    SpaceHeight 
= (Height-100)*(Values[i]/MaxValues(Values));
InBlock.gif                    objGraphics.DrawRectangle(
new Pen(BorderColor,1),KeysPoint.X,KeysPoint.Y - SpaceHeight,SpaceWidth+1,SpaceHeight+1);
InBlock.gif                    objGraphics.FillRectangle(
new SolidBrush(GetColor(i)),KeysPoint.X,KeysPoint.Y - SpaceHeight,SpaceWidth,SpaceHeight);
InBlock.gif                    KeysPoint.X 
+= SpaceWidth*2;
ExpandedSubBlockEnd.gif                }

InBlock.gif
InBlock.gif                
//画Bar上的数值,不和上边同时进行操作是因为Bar柱有可能覆盖了数值的显示,所以要分开
InBlock.gif
                for(int i=0;i < Values.Length;i++)
ExpandedSubBlockStart.gifContractedSubBlock.gif                
dot.gif{
InBlock.gif                    SpaceHeight 
= (Height-100)*(Values[i]/MaxValues(Values));
InBlock.gif                    KeysTextPoint.Y 
= (int)(KeysPoint.Y - SpaceHeight - 20);
InBlock.gif                    objGraphics.DrawString(Values[i].ToString(),
new Font("宋体",10),new SolidBrush(TextColor),KeysTextPoint);
InBlock.gif                    KeysTextPoint.X 
+= SpaceWidth*2;
ExpandedSubBlockEnd.gif                }

ExpandedBlockEnd.gif            }


至此,Bar图绘制算是完成了,看看效果(经过缩放):

Bar3.jpg


由于右边部分和标题没有进行缩放,所以图片小于300X300的时候会有部分重叠,呵呵,解决这个问题也不难,继续将它们也按图片比例缩放就OK了,呵呵

有批评或建议请留言或Email我:kenblove@gmail.com

点击下载源代码例子:bar.rar

转载于:https://www.cnblogs.com/KenBlove/archive/2006/07/28/461808.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值