快捷導(dǎo)航

ASP.NET中制作各種3D圖表的方法

更新時間：2016年10月24日 11:17:08 投稿：daisy

這篇文章主要給大家介紹如何在ASP.NET中如何制作3D圖表。大家都知道圖表在ASP.NET技術(shù)中是一種特別受歡迎而又很重要的工具。圖表是表示數(shù)據(jù)的圖形，一般含有X和Y兩個坐標(biāo)軸。我們可以用折線，柱狀，塊狀來表示數(shù)據(jù)。下面通過本文來一起學(xué)習(xí)下各種3D圖表的制作過程吧。

前言

大家都知道通過圖表控件，我們即能表示數(shù)據(jù)又能比較各種圖表的數(shù)據(jù)，例如比較去年和今年的收入。圖表的類型也有很多，如柱狀圖、折線圖、條形圖、組合圖等等。

首先，我將展示如何繪制出一個簡單的圖表。

簡單圖表的步驟

步驟1

新建一個”ASP.NET Empty Web Site”。

步驟2

在Solution Explorer 中添加新項目，添加new form。

步驟3

工具欄—標(biāo)準(zhǔn)—項目。我們會看到在.Net Framework Component.中有兩個圖表選項，打勾并保存。.NET Framework 4.0 及以上版本將chart控件集成到了工具箱toolbox里面，3.5及早期版本中則需要此步驟。

步驟4

進入工具欄—數(shù)據(jù)—圖表，從工具欄中拖到頁面。

步驟5

將chart控件拖到頁面以后，IDE會自動在web.config 文件中添加以下4個標(biāo)簽，同時在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

右擊圖表，進入屬性。屬性窗口選擇并添加數(shù)據(jù)源。當(dāng)然我們也可以用代碼將數(shù)據(jù)綁定到圖表的方式，下文的3D圖表的代碼我就采用了綁定方法。

步驟7

成功添加數(shù)據(jù)源之后，返回屬性窗口，點擊系列，我們會看到這樣的一個窗口。

步驟8

在系列的數(shù)據(jù)源中設(shè)置X軸和Y的對應(yīng)項，這里我將X軸的對應(yīng)項的值設(shè)置為姓名, Y軸的對應(yīng)項的值設(shè)置為年齡。如果想要在圖表中分別為X和Y軸命名，那么返回屬性窗口，點擊圖表區(qū)，你就會看到一個Axes的屬性。

步驟9

運行程序，輸出結(jié)果如下圖。

圖表的類型

如果你想要各種類型的圖表，這很簡單，右擊圖表—顯示智能標(biāo)簽，就能選取各種圖表類型了。

3D 圖表

與其他圖表相比，3D圖表的優(yōu)勢在于看起來更清晰、更直觀?，F(xiàn)在我們就來討論如何制作3D圖表。

首先新建一個網(wǎng)站，將圖表拖到aspx頁面。如我上述所說，代碼會自動添加到web.config文件中。然后只有在aspx頁面中有一個圖表區(qū)標(biāo)簽。我們把3D改為true。我們也可以使用向?qū)?，右擊圖表—屬性—圖表區(qū)屬性，然后在3D圖表設(shè)置中將3D改為true，默認(rèn)情況下就會是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" onload="ScoreChart_Load">
    <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; }
}

創(chuàng)建數(shù)據(jù)源，將數(shù)據(jù)源綁定到圖表中，綁定方法的代碼如下：

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后我們就可以創(chuàng)建一個3D圖表，它是一個布爾類型可能是為true也可能是為false，默認(rèn)情況下通常為false。此外，在ASP.NET中，3D圖表的角度也可以調(diào)整，介于90度到-90度之間。-90度會使圖表會完全處于置底，90度則會完全置頂。有一個屬性被稱為“Is clustered”屬性是一個布爾值，即使使用具有相同類型和性質(zhì)的多個圖表，它也能展現(xiàn)良好的視圖效果。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: