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

ASP.NET MVC 图表控件

Ariful Islam Sabuz
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.86/5 (58投票s)

2010年11月7日

CPOL

5分钟阅读

viewsIcon

330627

downloadIcon

17423

展示了如何在 ASP.NET MVC 中使用图表控件

引言

在 ASP.NET MVC 中集成图表控件非常容易。微软发布了一个强大的 ASP.NET 图表控件，它支持丰富的图表选项 - 包括柱形图、样条图、条形图、点图、气泡图、饼图、甜甜圈图、金字塔图、漏斗图、箱线图、面积图、范围图、AJAX 交互式图表等。 Microsoft Chart Controls 示例项目 包含超过 200 个 ASP.NET 页面的图表示例。在这篇文章中，我将展示如何在 ASP.NET MVC 中使用图表控件。我的示例项目是使用 ASP.NET MVC 2 完成的。

背景

我在这里介绍一个非常简单的项目，用于展示一个班级的成绩比较结果。两个字段 - ID（学生的唯一标识）和 GPA（平均绩点）- 代表特定学生的成绩。各种图表结果显示了学生成绩的比较。我想重点介绍如何轻松地在相同数据上显示各种结果。在这个项目中，您可以添加、编辑和删除学生成绩，并动态显示更改。

result-chart.png

cuid.gif

解决方案概览

要运行项目，必须安装以下组件

要开始，您需要引用 System.Web.UI.DataVisualization 程序集。还原数据库备份，或运行位于 Database 文件夹中的脚本。

完成这些之后，将图表添加到视图页面就非常简单了。

<img src="/Chart/CreateChart?chartType=
    <%=System.Web.UI.DataVisualization.Charting.SeriesChartType.Column%>" alt="" />

这会调用 Chart 控制器上的 CreateChart 操作，并传递一个名为 chartType 的参数。此参数定义了您的图表类型。SeriesChartType 是 System.Web.UI.DataVisualization.Charting 命名空间中描述的一个枚举。它是 Series 类的属性。Series 类的实例将被添加到 Chart 类对象中。该操作会在内存中创建一个图表，将图表保存为图像到 temp 文件夹，然后将图表图像流式传输到客户端。顺便说一下，该操作返回一个 FileResult。

这是图表控件的总结。下一节您将更加清楚。

Using the Code

控制器代码
public FileResult CreateChart(SeriesChartType chartType)
{
      IList<ResultModel> peoples = _resultService.GetResults();
      Chart chart = new Chart();
      chart.Width = 700;
      chart.Height = 300;
      chart.BackColor = Color.FromArgb(211, 223, 240);
      chart.BorderlineDashStyle = ChartDashStyle.Solid;
      chart.BackSecondaryColor = Color.White;
      chart.BackGradientStyle = GradientStyle.TopBottom;
      chart.BorderlineWidth = 1;
      chart.Palette = ChartColorPalette.BrightPastel;
      chart.BorderlineColor = Color.FromArgb(26, 59, 105);
      chart.RenderType = RenderType.BinaryStreaming;
      chart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
      chart.AntiAliasing = AntiAliasingStyles.All;
      chart.TextAntiAliasingQuality = TextAntiAliasingQuality.Normal;
      chart.Titles.Add(CreateTitle());
      chart.Legends.Add(CreateLegend());
      chart.Series.Add(CreateSeries(peoples,chartType));
      chart.ChartAreas.Add(CreateChartArea());

      MemoryStream ms = new MemoryStream();
      chart.SaveImage(ms);
      return File(ms.GetBuffer(), @"image/png");
}

Chart 类具有各种属性，可以控制宽度、高度、边框颜色、背景颜色、皮肤、调色板等。标题、图例、系列和图表区域是任何图表非常重要的特征。如果您不熟悉这些术语，不用担心。快速查看 图表元素概览 部分。

创建标题
public Title CreateTitle()
{
      Title title = new Title();
      title.Text = "Result Chart";
      title.ShadowColor = Color.FromArgb(32, 0, 0, 0);
      title.Font = new Font("Trebuchet MS", 14F, FontStyle.Bold);
      title.ShadowOffset = 3;
      title.ForeColor = Color.FromArgb(26, 59, 105);
      return title;
}

您一定明白 title.Text 属性负责显示标题。如果您有多个标题，可以根据需要多次添加。

创建图例
public Title CreateTitle()
{
      Title title = new Title();
      title.Text = "Result Chart";
      title.ShadowColor = Color.FromArgb(32, 0, 0, 0);
      title.Font = new Font("Trebuchet MS", 14F, FontStyle.Bold);
      title.ShadowOffset = 3;
      title.ForeColor = Color.FromArgb(26, 59, 105);
      return title;
}

您可以在此处更改图例的外观。这与标题的代码几乎相似。

创建系列
public Series CreateSeries(IList<ResultModel> results, SeriesChartType chartType)
{
      Series seriesDetail = new Series();
      seriesDetail.Name = "Result Chart";
      seriesDetail.IsValueShownAsLabel = false;
      seriesDetail.Color = Color.FromArgb(198, 99, 99);
      seriesDetail.ChartType = chartType;
      seriesDetail.BorderWidth = 2;
      DataPoint point;

      foreach (ResultModel result in results)
      {
          point = new DataPoint();
          point.AxisLabel =result.ID;
          point.YValues = new double[] {double.Parse(result.GPA) };
          seriesDetail.Points.Add(point);
      }
      seriesDetail.ChartArea = "Result Chart";
      return seriesDetail;
}

任何图表元素的 x 和 y 值都设置为 DataPoint。在此方法中，我们从 results 集合中获取值。我们将每个值对添加到系列 Points 集合中。这里有一点很重要：一个图表区域可以有多个系列，我们需要确保哪个图表区域包含哪个系列。

您可以设置各种属性来更改外观。

创建图表区域
public ChartArea CreateChartArea()
{
      ChartArea chartArea = new ChartArea();
      chartArea.Name = "Result Chart";
      chartArea.BackColor = Color.Transparent;
      chartArea.AxisX.IsLabelAutoFit = false;
      chartArea.AxisY.IsLabelAutoFit = false;
      chartArea.AxisX.LabelStyle.Font = 
         new Font("Verdana,Arial,Helvetica,sans-serif", 
                  8F,FontStyle.Regular);
      chartArea.AxisY.LabelStyle.Font = 
         new Font("Verdana,Arial,Helvetica,sans-serif", 
                  8F,FontStyle.Regular);
      chartArea.AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);
      chartArea.AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);
      chartArea.AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
      chartArea.AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);
      chartArea.AxisX.Interval = 1;
}

您可以在此处控制图表区域的各种属性，如线条颜色、标签样式、字体、轴标签间隔等。您也可以在此启用 3D 样式。

简而言之，一个图表有多个图表区域，一个图表区域有多个系列、标题。一个系列有多个图例。您可以在同一个图表区域中绘制多个图表系列，或在同一个图表中绘制多个图表区域。Name 属性就像 ID，您可以通过此属性区分任何属性（图表区域、系列或标题）。

现在您可以根据您的需求创建几乎任何图表。并且可以通过更改相应的样式属性来更改外观。

图表元素概览

这部分内容是我从微软图表控件示例中获取的。我在这里包含它是为了更好地理解图表的各种元素。

图表由许多元素组成，所有这些元素都可以通过 Chart 控件 API 访问。Chart 控件 API 是面向对象的、可扩展的、高度灵活的。

下图说明了构成图表的主要元素

chart-area.JPG

以下列表描述了主要的图表组件

  • 标题：图表的主要标题。图表图像中可以放置无限数量的标题。请注意，可以使用 GDI+ 和绘图相关事件显示自定义文本。
  • 图表区域：图表图像由一个或多个图表区域组成，这些图表区域是用于绘制系列、标签、轴、网格线、刻度线等的矩形区域。根据涉及的图表类型，可以在一个图表区域中绘制多个系列。

    绘图区域，用于绘制图表数据，也包含在图表区域内。

  • 图表系列：系列是一组相关的数据点。每个系列都与一个图表类型相关联。
  • 图例：图表图像的图例。图表中可以放置无限数量的图例。
  • 轴标签：轴上的一个标签。
  • 轴标题：轴的标题。
  • 图表图像：图表图像是由 Chart 控件渲染的整个图像表面。它对应于根 Chart 对象。
  • 网格线：有主要和次要水平和垂直网格线，它们通常与刻度线一起出现。
  • 刻度线：有主要和次要水平和垂直刻度线，它们通常与网格线一起出现。
  • 绘图区域：绘图区域是图表区域内用于绘制系列和网格线的内部矩形区域。标签、刻度线、轴标题等都绘制在绘图区域外部、图表区域内部。可以通过 ChartArea.InnerPlotPosition 属性设置绘图区域。
  • 值标签：一个特殊标签，出现在数据点附近，略微偏离数据点的绘制位置。它可以是数据点的值或自定义文本。

额外资源

结论

本文介绍的项目只是一个示例，展示了如何在 ASP.NET MVC 中表示图表控件。您可以根据自己的需求进行改进；本文仅为您提供方向。

© . All rights reserved.