如何在ASP.Net创建各种3D图表

我们都知道,图表在ASP.NET技术中是一种特别受欢迎而又很重要的工具。图表是表示数据的图形,一般含有X和Y两个坐标轴。我们可以用折线,柱状,块状来表示数据。通过图表控件,我们即能表示数据又能比较各种图表的数据,例如比较去年和今年的收入。图表的类型也有很多,如柱状图、折线图、条形图、组合图等等。

这篇文章将阐述如何在ASP.NET中如何制作3D图表。首先,我将展示如何绘制出一个简单的图表。

简单图表的步骤

步骤1

新建一个"ASP.NET Empty Web Site"。

步骤2

在Solution Explorer 中添加新项目,添加new form。

步骤3

工具栏—标准—项目。我们会看到在.Net Framework Component.中有两个图表选项,打勾并保存。.NET Framework 4.0 及以上版本将chart控件集成到了工具箱toolbox里面,3.5及早期版本中则需要此步骤。

步骤4

进入工具栏—数据—图表,从工具栏中拖到页面。

步骤5

将chart控件拖到页面以后,IDE会自动在web.config 文件中添加以下4个标签,同时在Default.aspx 的designer页面也能看到一个普通图表。

 <appSettings>
        <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
      </appSettings>
 <httpHandlers>
          <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
            validate="false" />
        </httpHandlers>
 <controls>
        <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
          assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </controls>
 <assemblies>
        <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>

步骤6

右击图表,进入属性。属性窗口选择并添加数据源。当然我们也可以用代码将数据绑定到图表的方式,下文的3D图表的代码我就采用了绑定方法。

步骤7

成功添加数据源之后,返回属性窗口,点击系列,我们会看到这样的一个窗口。

步骤8

在系列的数据源中设置X轴和Y的对应项,这里我将X轴的对应项的值设置为姓名, Y轴的对应项的值设置为年龄。如果想要在图表中分别为X和Y轴命名,那么返回属性窗口,点击图表区,你就会看到一个Axes的属性。

步骤9

运行程序,输出结果如下图。

图表的类型

如果你想要各种类型的图表,这很简单,右击图表—显示智能标签,就能选取各种图表类型了。

3D 图表

与其他图表相比,3D图表的优势在于看起来更清晰、更直观。现在我们就来讨论如何制作3D图表。

首先新建一个网站,将图表拖到aspx页面。如我上述所说,代码会自动添加到web.config文件中。然后只有在aspx页面中有一个图表区标签。我们把3D改为true。我们也可以使用向导,右击图表—属性—图表区属性,然后在3D图表设置中将3D改为true,默认情况下就会是false。

代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExamChart.aspx.cs" Inherits="ExamChart" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

      <asp:Chart ID="ScoreChart" Width="600px" Height="320px" runat="server"
            BackColor="Silver" BackGradientStyle="LeftRight" BorderlineWidth="2"
            TabIndex="2" >
        <Series>
          <asp:Series Name="RunSeries" ChartArea="ChartArea1">

          </asp:Series>
        </Series>
        <ChartAreas>
          <asp:ChartArea Name="ChartArea1">
              <AxisY Title="得分">
              </AxisY>
              <AxisX Title="姓名">
              </AxisX>
<Area3DStyle Enable3D="True" WallWidth="10"></Area3DStyle>
          </asp:ChartArea>
        </ChartAreas>
          <Titles>
              <asp:Title Name="Title1" Text="得分情况">
              </asp:Title>
          </Titles>
      </asp:Chart>

    </div>
    </form>
</body>
</html>

然后新建一个类:

public class run
{
    public string Name { get; set; }
    public int Point { get; set; }
}

创建数据源,将数据源绑定到图表中,绑定方法的代码如下:

using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.DataVisualization.Charting;

public partial class ExamChart : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {

            BindData();

        }

    }

    private void BindData()
    {

        var runs = new List<run>()
            {
                new run() { Name = "王利", Point = 200},
                new run() { Name = "张明", Point = 32 },
                new run() { Name = "孙超", Point = 78 },
                new run() { Name = "李飞", Point = 50 },
                new run() { Name = "赵越", Point = 32 },
                new run() { Name = "王洪", Point = 155},
                new run() { Name = "宋伟", Point = 22 }
            };

        var series = ScoreChart.Series["RunSeries"];

        foreach (var exam in runs)
        {

            var point = new DataPoint();
            point.SetValueXY(exam.Name, exam.Point);

            point.Label = exam.Point.ToString();
            series.Points.Add(point);
        }

        ScoreChart.DataSource = runs;
        ScoreChart.DataBind();
    }
    protected void ScoreChart_Load(object sender, EventArgs e)
    {

    }
}

运行程序,效果图:

我们知道,生效3D后我们就可以创建一个3D图表,它是一个布尔类型可能是为true也可能是为false,默认情况下通常为false。此外,在ASP.NET中,3D图表的角度也可以调整,介于90度到-90度之间。-90度会使图表会完全处于置底,90度则会完全置顶。有一个属性被称为“Is clustered”属性是一个布尔值,即使使用具有相同类型和性质的多个图表,它也能展现良好的视图效果。暂时分享到这里,谢谢浏览,希望对你有所参考!

时间: 2024-10-13 09:11:49

如何在ASP.Net创建各种3D图表的相关文章

图表Web组件提供2D和3D图表类型控件Nevron Chart for SharePoint

Nevron Chart for SharePoint是一个先进的图表Web组件,其能为您的SharePoint站点提供一整套的2D和3D图表类型,高度可自定义的轴,先进的数据分析功能,严密的数据集成和无与伦比的视觉效果.其组合了业内领先的Nevron Charting engine for ASP.NET以及Nevron Pivot Data Aggregation engine.这使得用户能在SharePoint环境中直观的完成复杂的透视图表的创建. 此产品属于产品Nevron ShareP

如何在ASP.NET Core中应用Entity Framework

注:本文提到的代码示例下载地址> How to using Entity Framework DB first in ASP.NET Core 如何在ASP.NET Core中应用Entity Framework 首先为大家提醒一点,.NET Core和经典.NET Framework的Library是不通用的,包括Entity Framework! 哪怎么办? 别急,微软为.NET Core发布了.NET Core版本的Entity Framework,具体配置方法与经典.NET Framew

如何在ASP.NET Core中实现一个基础的身份认证

注:本文提到的代码示例下载地址> How to achieve a basic authorization in ASP.NET Core 如何在ASP.NET Core中实现一个基础的身份认证 ASP.NET终于可以跨平台了,但是不是我们常用的ASP.NET, 而是叫一个ASP.NET Core的新平台,他可以跨Windows, Linux, OS X等平台来部署你的web应用程序,你可以理解为,这个框架就是ASP.NET的下一个版本,相对于传统ASP.NET程序,它还是有一些不同的地方的,比

如何在asp.net mvc3中使用HttpStatusCode

下载了asp.net mvc 4的源码看了看,没怎么看清楚.不过个人觉得MVC4 beta中Web API这个是比较不错的,虽然说它是往传统回归. web api最好的莫过于它更加适合使用jquery的ajax调用. 我这里主要给大家说明下如何在asp.net mvc 3中借鉴Web API的特性来让AJAX调用更加酷. 首先给大家看个例子,传统的asp.net mvc 3中异步调用的Response: Action如下: 相应的jquery ajax请求代码(只是简单的代码,): 我们来运行看

Unity制作简单3D图表

开篇废话: 在大学时稍微自学过一段时间Unity3D,虽然现在在做安卓,但一直对游戏开发很感兴趣,所以平时偶尔有空也会稍微看看,不过水平还是未入门菜鸟级的. 下面这个demo是看了雨松MOMO大神所写的几篇基础文章后,写的一个练习demo,用来展示简易的3D图表. 这个Demo非常初级,纯粹是为了练习知识点,但是所应用到的知识点非常基础,非常重要,适合初学者学习.截图如下:     简介: 这个Demo可以分为4个部分 第一部分--建立3D坐标系: 外框首先由四个平面所围成的一个"3D坐标系&q

如何在Asp.net中备份Access数据库?

public   void   Create(   string   mdbPath   ) { if(   File.Exists(mdbPath)   )   //检查数据库是否已存在 { throw   new   Exception( "目标数据库已存在,无法创建 "); } //   可以加上密码,这样创建后的数据库必须输入密码后才能打开 mdbPath   =   "Provider=Microsoft.Jet.OLEDB.4.0;Data   Source= &

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[About Layout Pages] 很多网站有些内容需要显示在各个页面中,比如Header,Footer或者告诉用户已经登录的部分.ASP.NET允许你创建一个单独的文件来包含文本.标签和代码的内容块,从而搭建一个风格整齐的网站.接下来你就可以将这个内容块插入到任何你想要让它展示的页面中.采用这种方法

如何在asp.net中获取GridView隐藏列的值?

在阅读本文之前,我获取gridview某行某列的值一般做法是这样的:row.Cells[3].Text.ToString().有点傻瓜呵呵 在Asp.net 2.0中增加了一个新的数据绑定控件:GridView,其目的用来取代Asp.net1.x中的DataGrid控件.获取GridView中的某列值的方法为   protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)    {        stri

如何在 ASP.NET MVC 中集成 AngularJS(2)

在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中集成 AngularJS 的第二部分. ASP.NET 捆绑和压缩 CSS 和 JavaScript 的捆绑与压缩功能是 ASP.NET MVC 最流行和有效的特性之一.捆绑和压缩降低了 HTTP 请求和有效载荷的大小,结果是可以更快和更好的执行 ASP.NET MVC 的网站.有许多可以减少 CS