Dynamically creating a pie chart with ASP.NET and GDI+

原创 2004年09月12日 01:18:00

Aim
To dynamically produce a pie chart in ASP.NET using the System.Drawing Namespace.

Here is what we will hopefully end up with:

What is GDI+?

GDI+ is a set of classes in the System.Drawing Namespace to draw images ‘on the fly’

Let’s get going!

In this tutorial I am going to use inline code, this will still work with code behind.

> Start the page and import required namespaces.

Source Code:

<%@ Page Language="VB" ContentType="Image/jpeg" %>
<%@ import Namespace="System.Drawing" %>
<%@ import Namespace="System.Drawing.Imaging" %>
<%@ import Namespace="System.Drawing.Drawing2d" %>


You will notice that the ContentType for this page is set to “Image/jpeg”. This is because we need to tell the browser that this is an image not html.

> Start writing the code for this webform

Source Code:

<script runat="server">
Sub Page_Load()
Dim strTitle As String
Dim arrLabels(2) As String
Dim arrData(2) As String

strTitle = “What do you think of this pie chart?”

arrData(0) = 9
arrData(1) = 19
arrData(2) = 12

arrLabels(0) = “I love it!”
arrLabels(1) = “It’s ok”
arrLabels(2) = “It’s Amazing”


This is the only part you really need to modify; these arrays could be bound by a database.

Source Code:

Dim i As Integer
Dim b As New Bitmap(400, 205)
Dim g As Graphics
Dim sum AS integer
Dim icons As PointF = New PointF(230, 35)
Dim desc As PointF = New PointF(255, 33)
Dim current As Single = 0
Dim total As Single = 0
Dim encoderParams as System.Drawing.Imaging.EncoderParameters = new
System.Drawing.Imaging.EncoderParameters()
Dim quality as long
Dim arrayICI as ImageCodecInfo() = ImageCodecInfo.GetImageEncoders()
Dim jpegICI as ImageCodecInfo
Dim x as integer
Dim legendheight As Integer


These are all the declarations for this webform.

Source Code:

legendheight = arrLabels.Length * 16

'Set up graphics
g = Graphics.FromImage(b)
g.Clear(color.White)
g.Smoothingmode = Smoothingmode.HighQuality

'get total of data
For i = 0 To arrData.Length - 1

sum += arrData(i)

Next i

'draw title
g.DrawString(strtitle, New Font("Verdana", 10), Brushes.Black, New PointF(0, 0))

'draw legend
g.FillRectangle(brushes.Silver, 229, 34, 131, legendheight)
g.DrawRectangle(pens.black, 228, 33, 130, legendheight - 1)
g.FillRectangle(brushes.Beige, 228, 33, 130, legendheight - 1)

For i = 0 To Ubound(arrLabels)

g.FillRectangle(New SolidBrush(SelectColor(i)), icons.X, icons.Y, 20, 10)
g.DrawRectangle(Pens.Black, icons.X, icons.Y, 20, 10)
g.DrawString(arrLabels(i), New Font("Tahoma", 10), Brushes.Black, desc)

icons.Y += 15
desc.Y += 15

Next i

'Draw the pie chart

g.FillPie(New System.Drawing.SolidBrush(color.silver), 2, 24, 175, 176, 360, 360)

i = 0

For i = 0 To arrData.Length - 1

current = arrData(i) / sum * 360
g.FillPie(New SolidBrush(SelectColor(i)), 2, 22, 173, 175, total, current)
g.DrawPie(Pens.Black, 2, 22, 173, 175, total, current)
total += current

Next i

'Save image to output stream

quality = 90
Dim encoderParam as System.Drawing.Imaging.EncoderParameter = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, quality)
encoderParams.Param(0) = encoderParam


for x = 0 to arrayICI.Length-1
if (arrayICI(x).FormatDescription.Equals("JPEG")) then
jpegICI = arrayICI(x)
exit for
end if
next

if not jpegICI is nothing then
b.Save(Response.OutputStream, jpegICI, encoderParams)
End If

End Sub


Ok, now we’ve finished the main code, now there’s just a simple function to specify the colours for the piechart.

Source Code:

Function SelectColor(i As Integer) As Color
Dim output As Color
Select Case i
Case 0
Return Color.Blue
Case 1
Return Color.Red
Case 2
Return Color.Yellow
Case 3
Return Color.Purple
Case 4
Return Color.Orange
Case 5
Return Color.Brown
Case 6
Return Color.Gray
Case 7
Return Color.SkyBlue
Case 8
Return Color.Salmon
Case 9
Return Color.lime
End Select
End Function

</script>


And that’s it!

This Article was written on 1/19/2004 12:58:00 PM by   Martin


 

CDH5.3.3安装(hadoop集群)

Cloudera Manager提供两种软件包安装源,Package 和 Parcel: Package就是一个个rpm文件,以yum的方式组织起来。 Parcel是rpm包的压缩格式,以.parce...
  • hualiu163
  • hualiu163
  • 2015年06月27日 10:21
  • 11637

饼状图(PieChart)与柱形图(BarChart)的使用

最近在工作中需要用到饼状图与柱状图的功能,网上查了一下MPAndroidChart开源图表库是一个很好的东西,并下载了MPAndroidChart项目运行。于是自己写了一个简单的例子,使用PieCha...
  • qidingquan
  • qidingquan
  • 2016年06月16日 17:21
  • 7073

asp.net使用chart控件简单制作柱状体、饼图总结

asp.net使用chart控件简单制作柱状体、饼图总结 1、  柱状图   前台代码:                                           ...
  • liucunguang2
  • liucunguang2
  • 2014年05月23日 18:02
  • 3465

Resizing a Photographic image with GDI+ for .NET

http://www.codeproject.com/KB/GDI-plus/imageresize.aspx This article describes the various techni...
  • scutqinwei
  • scutqinwei
  • 2011年12月06日 21:03
  • 332

asp.net GDI+ 绘制验证码 大小写字母数字混合

Random r = new Random(); str = string.Empty; for (int i = 0; i < 5; i++) ...
  • qq_28018731
  • qq_28018731
  • 2017年06月06日 11:09
  • 271

Creating Custom ASP.NET Server Controls with Embedded JavaScript

I did some consulting work recently for a company that had a lot of JavaScript embedded in pages tha...
  • mleader1
  • mleader1
  • 2012年02月24日 13:37
  • 342

Creating and Calling ASP.NET AJAX Web Service

Hi, First we will create a new ASP.NET Ajax web site(Visual Studio 2005) or ASP.NET web site (ve...
  • clszd0717
  • clszd0717
  • 2011年09月13日 16:01
  • 175

ASP.NET Chart usage with LINQ

table 1, user :  ID username password 2, userdata: ID UID datetime HR BR ASPX Diagram ...
  • zhangxiao86
  • zhangxiao86
  • 2012年09月09日 07:27
  • 261

Asp.net gdi+画圆柱

  • 2008年10月30日 08:24
  • 6KB
  • 下载

Creating a Class Factory with C# and .NET

  • 2007年12月07日 10:26
  • 36KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Dynamically creating a pie chart with ASP.NET and GDI+
举报原因:
原因补充:

(最多只允许输入30个字)