博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

在asp.net mvc 中使用mschart控件(VS2008 && VS2010)

Posted on 2010-05-13 14:45  吕霖  阅读(4142)  评论(9编辑  收藏  举报

1、首先新建一个asp.net mvc 项目.

2、添加引用System.Web.DataVisualization.(若是VS2010开发环境,则添加引用C:\Program Files\Microsoft Chart Controls\Assemblies文件夹下System.Web.DataVisualization.dll)

3、修改项目的web.config文件,在<httpHandlers>节中增加

<add verb="GET,HEAD,POST" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

4、在web项目中新增文件夹TempImages.

5、准备工作已完成,现在做个测试例子.(若是VS2010开发环境,则需要在<%@ Page ..........%>后面添加<%@ Register Namespace="System.Web.UI.DataVisualization.Charting" Assembly="System.Web.DataVisualization,Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" TagPrefix="asp" %>)

打开about.aspx

修改<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server"></asp:Content>

改为如下:

 

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>About</h2>
    <p>
    <%
        // Create new data series and set it's visual attributes
        Series series = new Series("Spline");
        series.ChartType = SeriesChartType.Spline;
        series.BorderWidth = 3;
        series.ShadowOffset = 2;

        // Populate new series with data
        series.Points.AddY(67);
        series.Points.AddY(57);
        series.Points.AddY(83);
        series.Points.AddY(63);
        series.Points.AddY(70);
        series.Points.AddY(60);
        series.Points.AddY(90);
        series.Points.AddY(60);

        // Add series into the chart's series collection
        Chart1.Series.Add(series);
    %>
    </p>
     <asp:chart id="Chart1" runat="server" Height="296px" Width="412px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" Palette="BrightPastel" imagetype="Png" BorderDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" backcolor="#D3DFF0" BorderColor="26, 59, 105">
      <legends>
       <asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"></asp:Legend>
      </legends>
      <borderskin skinstyle="Emboss"></borderskin>
      <series>
       <asp:Series Name="Column" BorderColor="180, 26, 59, 105">
        <points>
         <asp:DataPoint YValues="45" />
         <asp:DataPoint YValues="34" />
         <asp:DataPoint YValues="67" />
         <asp:DataPoint YValues="41" />
         <asp:DataPoint YValues="23" />
         <asp:DataPoint YValues="87" />
         <asp:DataPoint YValues="45" />
         <asp:DataPoint YValues="32" />
        </points>
       </asp:Series>
      </series>
      <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:Content>

6、结果。看效果图

希望本文对您有所帮助,有不明白的地方请留言~~