在ASP.NET中动态创建柱状图和饼图

最新推荐文章于 2023-09-15 20:11:37 发布
最新推荐文章于 2023-09-15 20:11:37 发布
阅读量560 收藏
点赞数
文章标签： asp.net microsoft 图形 integer float string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hackhu/article/details/2056729
版权

第一步：创建一个新的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


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
}
}

 

在饼状图上如何标示数据 的我已经解决了，发给大家看一下，学习....

C#代码如下：
namespace per_mang
{
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;


/// <summary>
/// Chart 的摘要说明。
/// </summary>
public class Chart : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
Bitmap objBitMap = new Bitmap(700, 500);
Graphics objGraphics;
objGraphics = Graphics.FromImage(objBitMap);
objGraphics.Clear(Color.White);
StringFormat drawFormat = new System.Drawing.StringFormat(StringFormatFlags.DirectionVertical);
StringFormat drawFormat1 = new System.Drawing.StringFormat(StringFormatFlags.DisplayFormatControl);
int[] arrValues = {300,135,115,125,75,120};
string[] arrValueNames = new string[]{"一月","二月","三月","四月","五月","六月"};
objGraphics.DrawString(" X 公司上半年销售情况",
new Font("宋体", 16), Brushes.Black,200,0,drawFormat1);
PointF symbolLeg = new PointF(500, 20);
PointF descLeg = new PointF(560, 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, 400 - arrValues[i], 20,
arrValues[i] + 5);
objGraphics.DrawRectangle(Pens.Black, (i * 35) + 15, 400 - arrValues[i], 20, arrValues[i] + 5);
objGraphics.DrawString(arrValueNames[i].ToString() + "【"+ arrValues[i].ToString()+"】", new Font("宋体", 10), Brushes.Black,(i * 35) + 15,310 - arrValues[i], drawFormat);

}
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)), 420, 300, 100, 100, sglTotalAngle, sglCurrentAngle);
objGraphics.DrawPie(Pens.Black, 420, 300, 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
}
}

 
hackhu
关注
asp.net中绘制柱状图
JustLovePro的专栏
05-08 2081
  图形的绘制涉及到的类并不是很多，如果要绘制图形，特别是这种数据源动态变化的图形，坐标位置的控制非常关键。  这个Demo采用oracle数据库为数据源： CREATE TABLE IVAN_TEST(  MAJOR  VARCHAR2(50),  GRADE  NUMBER,  ID     NUMBER(10))Html中加入： asp:Button ID="btnC
ASP.NET动态创建柱状图与饼状图
Shadow的专栏
08-01 8729
     做web项目开发，难免会遇到动态创建柱状图或饼型图。现在用.net技术实现动态的创建它们。由于本身比较喜欢足球，更是鲁能的球迷，所以就用了鲁能的主场球迷人数作为例子，请不要太惊奇！ 一个人在西安的山东人希望鲁能可以提前夺冠！！呵呵，扯远了……动态创建柱状图与饼状图的前台HTML代码如下：                                    
在ASP.NET(c#)中调用wsChart图表组件生成柱状图
hello simon
08-20 4117
在ASP.NET(c#)要使用wsChart,首先应通过“项目”菜单下的“添加引用...”把wsChart.dll添加到项目里，然后编写代码。         以下是生成柱状图的示例代码。NormalPole.aspx.csusing System;using System.Collections;using System.ComponentModel;using System.Data;
ASP.NET动态生成柱状图与饼图教程
"在ASP.NET中动态创建柱状图和饼图" 在ASP.NET开发中，动态生成柱状图和饼图是常见的需求，能够帮助用户直观地理解数据。使用.NET Framework提供的GDI+库，我们可以轻松实现这些图表的创建。下面我们将详细探讨如何...
ASP.NET绑定sql数据库采用echarts显示数据图表(实现了柱状图和饼图).zip
12-12
首先，`pie.aspx`和`bar.aspx`是两个ASP.NET页面，分别用于展示饼图和柱状图。它们可能包含了HTML、CSS和C#代码，其中C#代码负责与数据库交互并处理数据。在`.aspx.cs`文件（如`pie.aspx.cs`和`bar.aspx.cs`）中，...
asp.net 柱形图
qq_27915701的博客
04-08 344
在vs中，如果要使用柱形图，我们大多数使用第三方提供的插件，所以必须要引用样式，这里我使用的是Highcharts-4.1.9插件，百度一下就可以下载到。关键的js代码： $(function () { $('#container').highcharts({
ASP.NET 柱形图
08-12 947
无标题页 protected void Page_Load(object sender, EventArgs e) { // 在此处放置用户代码以初始化页面 Bitmap objBitMap = new Bitmap(1000, 600); Graphi
ASP动态柱形图程序
01-01
通过本程序，可以很方便的根据你所设定的数值创造类似于EXCEL中柱形图的统计图表
ASP.NET ChartImage柱形图
06-16
C#绘制的柱形图片,里面的柱形样式,个数等等,都可以改变.可以用图表的形式显示数据
OWC生成柱状图的ASP.NET示例
04-26
在ASP.NET下使用owc生成柱状图的示例
asp.net中生成饼状与柱状图实例
01-02
本文实例讲述了asp.net中生成饼状与柱状图的实现方法。分享给大家供大家参考。具体方法如下： 一、生成图形的公共方法： 代码如下:using System; using System.Collections.Generic; using System.Text; // //using System.Data; //using System.Web.UI.WebControls; // using System.Drawing; using System.Drawing.Imaging;   namespace Tools {     public static class OWCImage
在ASP.NET页面中实现数据饼图
03-04
本文要介绍的在ASP.NET页面中实现数据饼图采用的基本也是这种方法。饼图有时称为\"Pie\"图，本文要实现的数据饼图模样。
c#通过.net自带的chart控件绘制饼图pie chart
热门推荐
fengjiexyb的专栏
09-09 1万+
原文地址：http://www.veryhuo.com/a/view/52954.html 需要实现的目标是： 　　1.将数据绑定到pie的后台数据中，自动生成饼图。 　　2.生成的饼图有详细文字的说明。 　　具体的实现步骤： 　　>>前台界面的设置： 　　1.设置chart1的属性Legends中默认的Legend1的Enable为false;
Asp.Net(C#)中如何画图表（饼图、折线、柱状图）
gates007的专栏
10-15 2992
<br />     我们经常在项目中遇到，许多的数据为了真观的体现给用户，不得不引和饼图，趋势图，等等柱状图来开形象的来呈现数据，如果在不使用第三方控件的情况下，我们都知道路在winform程序中是非常容易实现的，如是webform的实现就有点麻烦。本程序是在webform上放Image控件，加上.ashx一般处理文件实现的，原理为将Image的rsc属性转到xxxxx.ashx文件处，xxxxx.ashx文件反加一张已经画好的图片，在调用xxxxx.ashx文件时可以传递参数，如用户信息，根据用户ID生
Echarts 饼图的详细配置过程
最新发布
梁辰兴的博客
09-15 2059
Echarts饼图是Echarts中常用的一种图表类型，也是数据可视化中常用的一种形式。饼图通过扇形的方式展示数据的比例和占比关系。Echarts饼图的特点如下：直观的数据占比展示：饼图通过不同大小的扇形来表示数据的比例和占比关系，直观地展示了数据的分布情况。饼图适用于展示相对比例关系和部分占整体的数据。多样的样式配置：Echarts饼图提供了丰富的样式配置选项，可以自定义扇形的颜色、内外半径、标签样式等，以及整个图表的标题、图例等，使图表更具个性化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值