65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET 图表控件

Madhukar Mudunuru
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.79/5 (15投票s)

2008 年 12 月 18 日

Ms-PL

2分钟阅读

viewsIcon

133157

downloadIcon

3994

使用 .NET Framework 3.5 SP1 提供的 ASP.NET 图表控件

引言

本文档简要介绍了如何使用 ASP.NET 图表控件并创建精美的图表。我想与对 Microsoft 技术感兴趣的您分享我的经验。

背景

我们可以使用各种组织开发的各种图表或图形控件。我们甚至可以使用 .NET Framework 提供的 System.Drawing 命名空间来开发我们自己的图表。有些人可能会使用 Google 图表，我们可以通过简单的 HTTP 请求获得。Microsoft 社区开发了非常有趣且外观良好丰富的图表。

必备组件

以下是使用 ASP.NET 图表控件的先决条件

  1. 安装 .NET Framework 3.5（如果可能，SP1）。

  2. 安装 Visual Studio 2008（如果可能，SP1）。

  3. 从以下链接下载图表和 Visual Studio 插件。

  4. 您还可以从以下链接下载示例和文档

    您可以通过双击 MSChart.exe 和插件 MSChart_VisualStudioAddOn.exe 来安装图表。

  5. 安装后，在 Visual Studio 2008 中创建一个 Web 项目/网站。

  6. 将工具箱的数据部分中可用的图表控件拖到设计器中。

使用图表控件

我们需要创建一个 <asp:chart /> 标签来放置控件。它具有各种属性，如链接、高度、宽度、阴影、背景色和边框颜色。

  <asp:chart id="Chart1" runat="server" Height="296px" Width="412px" 
        BorderDashStyle="Solid" BackSecondaryColor="White" 
        BackGradientStyle="TopBottom" BorderWidth="2px" backcolor="211, 223, 240" 
        BorderColor="#1A3B69" >

<titles .> 标签用于在图表上放置标题。我们可以使用 <asp:Title /> 标签创建一个标题。此处创建的标题将放置在图表上方。

 <Titles>  
       <asp:Title Text="Title of the Graph comes here" />  
 </Titles>

Series 标签用于添加列或在图表上绘制点。我们可以使用 <Asp:series /> 添加 series ，并使用 <points /> 添加绘制的 series 名称和点。我们可以使用 <asp:DataPoint /> 添加数据点。

在 <asp:datapoint> 标签中，axislabel 用于向 label 添加名称，xvalue 和 Yvalue 用于在图表上绘制点。

 <series>  
           <asp:Series Name="Students" BorderColor="180, 26, 59, 105">  
            <Points>
                <asp:DataPoint AxisLabel="jon" XValue="5" YValues="4" />
                <asp:DataPoint AxisLabel="kon" XValue="15" YValues="44" />
                <asp:DataPoint AxisLabel="pol" XValue="85" YValues="90" />
            </Points>
           </asp:Series>  
           <asp:Series   Name="Teachers" BorderColor="180, 26, 59, 105">  
            <Points>
                <asp:DataPoint AxisLabel="hjim" XValue="50" YValues="40" />
                <asp:DataPoint AxisLabel="azdai" XValue="75" YValues="4" />
                <asp:DataPoint AxisLabel="kriasm" XValue="35" YValues="29" />
            </Points>
           </asp:Series>             
      </series>

最后，我们需要创建一个图表区域，实际的图表将显示在其中。如果需要，我们可以在 Xaxis 和 Yaxis 上创建网格线，并可以按如下方式向图表区域添加样式

     <chartareas>  
           <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" 
	BorderDashStyle="Solid" BackSecondaryColor="White" 
	BackColor="64, 165, 191, 228" 
	ShadowColor="Transparent" BackGradientStyle="TopBottom">  
               <area3dstyle Rotation="10" perspective="10" Inclination="15" 
	IsRightAngleAxes="False" wallwidth="0" IsClustered="False"></area3dstyle>  
               <axisy linecolor="64, 64, 64, 64">  
                   <labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />  
                   <majorgrid linecolor="64, 64, 64, 64" />  
               </axisy>  
               <axisx linecolor="64, 64, 64, 64">  
                   <labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />  
                   <majorgrid linecolor="64, 64, 64, 64" />  
               </axisx>  
           </asp:ChartArea>  
       </chartareas>  
   </asp:chart>

在执行上述所有代码后，将创建上述图表。

值得关注的点  

我们可以通过添加数据点来创建图表。图表也可以通过向 asp:chart 控件提供数据源来动态创建，稍后我会提供给您。

参考文献

  1. 新的 ASP.NET 图表控件：<asp:chart runat="server"/>
  2. 图表控件

历史

  • 2008 年 12 月 18 日：初始发布
© . All rights reserved.