ASP.NET MVC中图表控件的使用方法

时间:2022-09-24 20:01:40

微软发布了一个强大的ASP.NET的图表控件,支持丰富的图表选项设置-包括列,点,泡沫,饼图,圆环图,金字塔,漏斗,盒形图,面积,范围,AJAX的互动,以及更多。Microsoft图表控件示例项目包括ASP.NET页的图表样本超过200个。在这篇文章中,我将展示如何在ASP.NET MVC中使用图表控件。

这里介绍一个非常简单的项目,显示了一个类的结果比较。两个字段 - ID(这是唯一的一个学生)和GPA(平均成绩) - 代表一个特定的学生的结果。各种图表结果显示,学生的结果进行比较。我希望把重点放在如何轻松地显示相同的数据不同的结果。在这个项目中,您可以添加,编辑和删除学生的成绩,并动态显示的变化。

要运行该项目,必须安装以下微软NET Framework 3.5的Microsoft图表控件组件

代码开始,你将需要引用的System.Web.UI.DataVisualization程序集

一旦你这样做,这是相当多的简单图表添加到视图页面。

?
1
<img src="/Chart/CreateChart?chartType=<%=System.Web.UI.DataVisualization.Charting.SeriesChartType.Column%>" csharp" id="highlighter_593527">
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
#region Chart Component
 
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");
}
 
[NonAction]
public Title CreateTitle()
{
Title target='_blank'>图片格式展现在页面。

这里介绍的项目是ASP.NET MVC的图表控件的一个小demo示例,最终展示如下:

ASP.NET MVC中图表控件的使用方法

以上就是告诉大家如何使用ASP.NET MVC中的图表控件,希望对大家的学习有所帮助。

延伸 · 阅读

精彩推荐