2. 程式人生 > >在ASP.NET中動態建立柱狀圖和餅圖

在ASP.NET中動態建立柱狀圖和餅圖

阿新 • • 發佈：2019-01-16

第一步：建立一個新的ASP.NET專案。

開啟Microsoft Visual Studio .NET，點選“檔案(File)”-“新建(New)”-“專案(Project)”，開啟“新建專案(New Project)”對話方塊，在“專案型別(Project Types)”裡選擇“Visual Basic 專案(Projects)”，在“模板(Templates)”裡選擇“ASP.NET應用程式(Web Application)”，在應用程式地址裡輸入：http://localhost/aspCharts，點選“確定(OK)”按鈕，Microsoft Visual Studio .NET將會自動在wwwroot目錄下建立一個名為aspCharts的Web工程。

第二步：為預設起始頁編寫程式碼（AspxChart.aspx）。

我們要在這個頁面裡顯示動態建立的圖形，開啟AspxChart.aspx的標籤頁的“HTML”檢視，插入下面的程式碼：

<html> <body> <form id="Form1" method="post" runat="server"> <table width="517" border="0" height="255"> <tr> <td align="middle"><img src="Chart.aspx"></td> </tr> <tr> <td height="20" align="middle">ASP.NET 中動態建立圖形範例</td> </tr> </table> </form> </body> </html>

第三步

：新增名為Chart.aspx的Web窗體頁。

開啟“解決方案資源管理器(Solution Explorer)”，在“aspCharts專案”上點選右鍵，選擇“新增(Add)”-“新增新項(Add New Item)”，彈出“新增新項(Add New Item)”對話方塊，在右邊的“模板”裡選擇“Web 窗體”，在底下的名字輸入框了輸入“Chart.aspx”，點選“開啟”按鈕。

第四步：為“Chart.aspx”Web 窗體頁新增程式碼。

在“Chart.aspx”窗體上點選右鍵，選擇“檢視程式碼(View Code)”，在程式碼的第一行新增下面二行：

Imports System.Drawing Imports System.Drawing.Imaging Public Class Chart Inherits System.Web.UI.Page #Region " Web 窗體設計器生成的程式碼 " '該呼叫是 Web 窗體設計器所必需的。 <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() End Sub Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: 此方法呼叫是 Web 窗體設計器所必需的 '不要使用程式碼編輯器修改它。 InitializeComponent() End Sub #End Region '建立頁面事件 Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load '宣告整型變數i， Dim i As Integer '建立一個位圖物件，用來放置柱形圖，我們可以把它看作是一塊畫布。 '這裡寬、高分別是400和200，當然，你也可以根據需要把它們做為引數來進行傳遞。 Dim objBitMap As New Bitmap(400, 200) '宣告一個圖形物件，在上面建立的點陣圖上畫圖。 Dim objGraphics As Graphics '從指定的objBitMap物件建立新圖形物件objGraphics。 objGraphics = Graphics.FromImage(objBitMap) '清除整個繪圖面並以指定白色為背景色進行填充。 objGraphics.Clear(Color.White) '建立一個數據源，這裡我們為了方便其間，採用陣列做為柱形圖和餅圖的資料來源。 Dim arrValues(5) As Integer arrValues(0) = 100 arrValues(1) = 135 arrValues(2) = 115 arrValues(3) = 125 arrValues(4) = 75 arrValues(5) = 120 '定義陣列物件，用來描述圖例。 Dim arrValueNames(5) As String arrValueNames(0) = "一月" arrValueNames(1) = "二月" arrValueNames(2) = "三月" arrValueNames(3) = "四月" arrValueNames(4) = "五月" arrValueNames(5) = "六月" '在畫布（objBitMap物件）的座標5，5處，用指定的Brush（畫筆）物件和Font（字型）物件繪製統計圖示題。 objGraphics.DrawString(" X 公司上半年銷售情況", _ New Font("宋體", 16), Brushes.Black, New PointF(5, 5)) '建立圖例文字。 Dim symbolLeg As PointF = New PointF(335, 20) Dim descLeg As PointF = New PointF(360, 16) '畫出圖例。利用objGraphics圖形物件的三個方法畫出圖例： 'FillRectangle()方法畫出填充矩形，DrawRectangle()方法畫出矩形的邊框， 'DrawString()方法畫出說明文字。這三個圖形物件的方法在 .NET 框架類庫類庫中均已過載， '可以很方便根據不同的引數來畫出圖形。 For i = 0 To arrValueNames.Length - 1 '畫出填充矩形。 objGraphics.FillRectangle(New SolidBrush(GetColor(i)), symbolLeg.X, symbolLeg.Y, 20, 10) '畫出矩形邊框。 objGraphics.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y, 20, 10) '畫出圖例說明文字。 objGraphics.DrawString(arrValueNames(i).ToString, New Font("宋體", 10), Brushes.Black, descLeg) '移動座標位置，只移動Y方向的值即可。 symbolLeg.Y += 15 descLeg.Y += 15 Next i '遍歷資料來源的每一項資料，並根據資料的大小畫出矩形圖（即柱形圖的柱）。 For i = 0 To arrValues.Length - 1 '畫出填充矩形。 objGraphics.FillRectangle(New SolidBrush(GetColor(i)), _ (i * 35) + 15, 200 - arrValues(i), 20, arrValues(i) + 5) '畫出矩形邊框線。 objGraphics.DrawRectangle(Pens.Black, (i * 35) + 15, 200 - arrValues(i), 20, arrValues(i) + 5) Next '下面畫餅圖。先定義兩個變數，代表當前角度和總角度，以便於畫圖時將角度進行按比例換算。 Dim sglCurrentAngle As Single = 0 Dim sglTotalAngle As Single = 0 '定義一個變數，代表總的銷售額。 Dim sglTotalValues As Single = 0 '計算總銷售額。 For i = 0 To arrValues.Length - 1 sglTotalValues += arrValues(i) Next i = 0 '遍歷資料來源的每一項資料，並根據資料的大小畫出餅圖。 '圖形物件的FillPie()方法和DrawPie()在.NET 框架類庫中已過載。 For i = 0 To arrValues.Length - 1 '計算當前角度值：當月銷售額 / 總銷售額 * 360，得到餅圖中當月所佔的角度大小。 sglCurrentAngle = arrValues(i) / sglTotalValues * 360 '畫出填充圓弧。 objGraphics.FillPie(New SolidBrush(GetColor(i)), _ 220, 95, 100, 100, sglTotalAngle, sglCurrentAngle) '畫出圓弧線。 objGraphics.DrawPie(Pens.Black, 220, 95, 100, 100, sglTotalAngle, sglCurrentAngle) '把當前圓弧角度加到總角度上。 sglTotalAngle += sglCurrentAngle Next i '將objGraphics物件以指定的圖形格式（這裡是Gif）儲存到指定的Stream物件，並輸出到客戶端。 objBitMap.Save(Response.OutputStream, ImageFormat.Gif) End Sub '下面這段函式用來根據不同的月份返回不同的顏色值。 Private Function GetColor(ByVal itemIndex As Integer) As Color Dim objColor As Color Select Case itemIndex Case 0 objColor = Color.Blue Case 1 objColor = Color.Red Case 2 objColor = Color.Yellow Case 3 objColor = Color.Purple Case 4 objColor = Color.Orange Case 5 objColor = Color.Brown Case 6 objColor = Color.Gray Case 7 objColor = Color.Maroon Case 8 objColor = Color.Maroon Case Else objColor = Color.Blue End Select Return objColor End Function End Class

好了，我們的程式碼已經寫完，點選“全部儲存”按鈕，然後按“F5”執行，看看最好的結果。如果沒有錯誤的話，您將會看到如下的結果：

值得說明的是，上面只是簡單地示例瞭如何利用.NET 框架類庫中的圖形類建立簡單的圖形，但.NET 框架類庫中還提供了更高階的二維和向量圖形功能，利用這些高階功能，我們可以創建出二維或向量的圖形，那時，我們的圖形看起來會更加形象。

本文所有程式碼在簡體中文Windows 2000 + .NET FrameWork 1.0（英文正式版）+ .NET FrameWork SP1和Windows XP + .NET FrameWork 1.0（中文版）下除錯通過。

C#程式碼

using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Drawing.Imaging; namespace eMeng.Exam { /// <summary> /// Chart 的摘要說明。 /// </summary> public class Chart : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { // 在此處放置使用者程式碼以初始化頁面 Bitmap objBitMap = new Bitmap(400, 200); Graphics objGraphics; objGraphics = Graphics.FromImage(objBitMap); objGraphics.Clear(Color.White); int[] arrValues = {100,135,115,125,75,120}; string[] arrValueNames = new string[]{"一月","二月","三月","四月","五月","六月"}; objGraphics.DrawString(" X 公司上半年銷售情況", new Font("宋體", 16), Brushes.Black, new PointF(5, 5)); PointF symbolLeg = new PointF(335, 20); PointF descLeg = new PointF(360, 16); for (int i = 0; i < arrValueNames.Length; i++) { objGraphics.FillRectangle(new SolidBrush(GetColor(i)), symbolLeg.X, symbolLeg.Y, 20, 10); objGraphics.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y, 20, 10); objGraphics.DrawString(arrValueNames[i].ToString(), new Font("宋體", 10), Brushes.Black, descLeg); symbolLeg.Y += 15; descLeg.Y += 15; } for (int i = 0; i < arrValues.Length; i++) { objGraphics.FillRectangle(new SolidBrush(GetColor(i)), (i * 35) + 15, 200 - arrValues[i], 20, arrValues[i] + 5); objGraphics.DrawRectangle(Pens.Black, (i * 35) + 15, 200 - arrValues[i], 20, arrValues[i] + 5); } float sglCurrentAngle = 0; float sglTotalAngle = 0; float sglTotalValues = 0; for (int i = 0; i <= arrValues.Length - 1; i++) { sglTotalValues += arrValues[i]; } for (int i = 0; i < arrValues.Length; i++) { sglCurrentAngle = arrValues[i] / sglTotalValues * 360; objGraphics.FillPie(new SolidBrush(GetColor(i)), 220, 95, 100, 100, sglTotalAngle, sglCurrentAngle); objGraphics.DrawPie(Pens.Black, 220, 95, 100, 100, sglTotalAngle, sglCurrentAngle); sglTotalAngle += sglCurrentAngle; } objBitMap.Save(Response.OutputStream, ImageFormat.Gif); } private Color GetColor(int itemIndex) { Color objColor; if (itemIndex == 0) { objColor = Color.Blue; } else if (itemIndex == 1) { objColor = Color.Red; } else if (itemIndex == 2) { objColor = Color.Yellow; } else if (itemIndex == 3) { objColor = Color.Purple; } else if (itemIndex == 4) { objColor = Color.Orange; } else if (itemIndex == 5) { objColor = Color.Brown; } else if (itemIndex == 6) { objColor = Color.Gray; } else if (itemIndex == 7) { objColor = Color.Maroon; } else if (itemIndex == 8) { objColor = Color.Maroon; } else { objColor = Color.Blue; } return objColor; } #region Web 窗體設計器生成的程式碼 override protected void OnInit(EventArgs e) { // // CODEGEN: 該呼叫是 ASP.NET Web 窗體設計器所必需的。 // InitializeComponent(); base.OnInit(e); } /// <summary> /// 設計器支援所需的方法 - 不要使用程式碼編輯器修改 /// 此方法的內容。 /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion } }

相關推薦

在ASP.NET中動態建立柱狀圖和餅圖

第一步：建立一個新的ASP.NET專案。 開啟Microsoft Visual Studio .NET，點選“檔案(File)”-“新建(New)”-“專案(Project)”，開啟“新建專案(New Project)”對話方塊，在“專案型別(Project Types)”裡

asp.net中動態變更CSS

在asp.net中，有的時候要動態變換CSS，比如有的時候做個性化頁面，可以這樣做<head><link id="MyStyleSheet" rel="stylesheet" type="text/css" runat="server" /></

在Asp.net中動態新增css檔案，js檔案，控制元件

一、動態新增CSS檔案        HtmlLink link = new HtmlLink();             link.Href = cssUrl;  //路徑             link.Attributes.Add("type", "text/css");             

ASP.NET中動態獲取資料使用Highcharts圖表控制元件

<%@ Page Title="" Language="C#" MasterPageFile="~/MyHome/MasterPage.master" AutoEventWireup="true" CodeFile="ryfb.aspx.cs" Inherits="MyHome_tixi_ryfb"%&

ASP.net中動態導航選單的實現

使用ASP.net開發網站時，有時需要根據不同的使用者許可權顯示不同的導航選單（Navigation Menu）。 在VS2008的【工具箱】->【導航】拖動一個Menu控制元件到test.aspx頁面，將ID修改為MenuTest。test.aspx:<asp:

asp.net中，<%#%>,<%=%>和<%%>分別是什麽意思，有什麽區別 --轉

bind ase bbbb pwd write ava int pla public 在asp.net中經常出現包含這種形式<%%>的html代碼,總的來說包含下面這樣幾種格式： 一. <%%> 這種格式實際上就是和asp的用法一樣的，只是asp中

關於ASP.NET中GridView控制元件的編輯和刪除問題！

第一種直接用SqlDataSource繫結實現編輯和刪除！ <head runat="server">     <title>無標題頁</title> </head> <body>     <form id

python 使用 matplotlib.pyplot來畫柱狀圖和餅圖

匯入包 import matplotlib.pyplot as plt 柱狀圖 最簡柱狀圖 # 顯示高度 def autolabel(rects): for rect in rects: height = rect.get_height() plt.text(r

ECHARTS柱形圖和餅圖數值顯示

echartsECHARTS柱形圖和餅圖數值顯示，官方文檔寫的很不錯，這裏自己單獨梳理一下，以後可能會用的到。1、柱形圖數值顯示 在option添加： label:{ normal:{ show: true, position: ‘to

動態生成頁面（一）——ASP.NET中Literal使用

case colspan label 奇偶數 容器 業務邏輯 con stringbu font 在頁面中加入內容時，假設是靜態內容。無需使用容器，能夠直接將標記作為HTML直接加入到頁面中；可是，假設是動態內容，則必須借助容器將內容加入到頁面中。典型的容器

asp.net Mvc 動態創建Controller

字段 control == return 註冊 gis nor factory request 有這麽個需求，Urls如下： http://localhost:52804 http://localhost:52804/home/test http://localh

在asp.net中呼叫Office來製作各種（3D）統計圖

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

秒懂ASP NET中的內建物件

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Java建立柱狀圖及餅狀圖

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

如何在asp.net中使用百度地圖並動態獲取到資料庫中的座標點進行標註

前段時間忙於公司的一個專案，專案中一個功能就是動態獲取資料庫的經緯度資訊並在百度地圖上進行標註，剛開始在網上查了很多資料還是沒能解決，也發現很多網友都遇到過這樣的問題，最後查閱資料過程中看到別人的文章，恍然大悟，然後重新程式碼順利解決。下面將本人的解決方法做一下介紹，供各位

asp.net 中使用EasyUI Datagrid 載入動態資料分頁查詢

剛用了datagrid外掛，記錄備忘。 datagrid官網文件地址：http://www.jeasyui.net/plugins/183.html 效果截圖： 功能實現的核心程式碼如下： 前臺程式碼： 前臺搜尋按鈕： <li><span clas

asp.net中Repeater中巢狀Repeater來顯示跟外層Repeater資料相關的其他資訊

        在實際開發中，比如在統一許可權管理系統中，我們預先定義了一些列角色，我們點選每一個角色，進入一個應用系統列表，我們要知道每個應用系統中，該角色已經擁有多少選單訪問許可權，我們就可以通過Repeater中巢狀Repeater來顯示這些資訊，如下圖所示：|||||

JFreeChart簡單例子_建立柱狀圖(當遇到中文亂碼時，將各個部分的字型分別設定一下就行了)

      public static JFreeChart getChart(CategoryDataset dataset)     {         //此標題  ‘某社團各部門 ’將被後面的chart.setTitle的標題  ‘某社團各部門柱狀圖’ 覆蓋         JFreeChart ch

ASP.NET中dropdownlist 動態繫結資料的二種方法

DataSet ds=new DataSet();SqlDataAdapter command=new SqlDataAdapter("",conn);...conn.Open();    //開啟資料庫連線command.SelectCommand.CommandText="Select a,b FROM 

asp.net中的cookie

再次 創建cookie bpa form void 並且 ima 顯示 red 一.cookie導讀，理解什麽是cookie 1.什麽是cookie：cookie是一種能夠讓網站服務器把少量數據（4kb左右）存儲到客戶端的硬盤或內存。並且讀可以取出來的一種技術。 2.