将图表绘制到ASP.NET MVC 4（Razor，C＃）网站

是否可以通过ASP.NET MVC 4（Razor）使用C＃绘制图表（曲线，直方图，圆）。 我正在尝试从我的数据库中提取的数据制作一些图形。 但是，我找不到如何。

有什么建议吗？

非常感谢 ！

Answer 1

有一个图表助手 ，它可以很好地与Razor配合使用，使您可以非常轻松地构建数据的图表，直方图和其他图形表示。

或者您可以尝试使用一些jQuery / HTML5 / Javascript库：

• Highcharts是一个用纯HTML5 / JavaScript编写的图表库，为您的网站或Web应用程序提供直观的交互式图表。

• jqPlot是jQuery Javascript框架的绘图和图表插件。

• Raphaël是一个小型JavaScript库，可以简化您在Web上使用矢量图形的工作。

其中有更多，上面只是一些例子;

Answer 2

如果要以图形forms显示数据，可以使用Chart帮助程序。 图表帮助程序可以呈现以各种图表类型显示数据的图像。

你可以创建一个具有图表剃刀代码的视图，如下所示（比如说它的https://stackoverflow.com/questions/21430701/drawing-charts-into-asp-net-mvc-4-razor-c-web-sites/MyChart.cshtml）。

带有主题的Array条形图

@{ var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green) .AddTitle("Chart Title") .AddSeries( name: "ChartTitle", xValue: new[] { "Col1", "Col2", "Col3", "Col4", "Col5" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); } 

数组的饼图

 @{ var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green) .AddTitle("Chart Title") .AddSeries( name: "ChartTitle", chartType: "Pie", xValue: new[] { "Col1", "Col2", "Col3", "Col4", "Col5" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); } 

饼图与数组主题

 @{ var myChart = new Chart(width: 600, height: 400) .AddTitle("Chart Title") .AddSeries( name: "ChartTitle", chartType: "Pie", xValue: new[] { "Col1", "Col2", "Col3", "Col4", "Col5" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); } 

条形图使用数据库查询

 @{ var db = Database.Open("DBName"); var data = db.Query("SELECT Col1, Col2 FROM Table"); var myChart = new Chart(width: 600, height: 400) .AddTitle("Chart Title") .DataBindTable(dataSource: data, xField: "Col1") .Write(); } 

你可以使用这些图表视图/ PartialView作为图像的src。

恩。

图表Theams

香草显示在白色背景的红色专栏。

蓝色显示蓝色渐变背景上的蓝色列。

绿色显示在绿色梯度背景的蓝色专栏。

黄色显示在黄色梯度背景的橙色专栏。

Vanilla3D在白色背景上显示3-D红色列。

SeriesChartType枚举支持以下内容：

1. 区域
2. 酒吧
3. 箱形图
4. 气泡
5. 檠
6. 柱
7. 甜甜圈
8. ErrorBar
9. 快线
10. FastPoint
11. 漏斗
12. 卡吉
13. 线
14. 馅饼
15. 点
16. PointAndFigure
17. 极性
18. 金字塔
19. 雷达
20. 范围
21. RangeBar
22. RangeColumn
23. 莲子
24. 仿样
25. SplineArea
26. SplineRange
27. StackedArea
28. StackedArea100
29. StackedBar
30. StackedBar100
31. StackedColumn
32. StackedColumn100
33. StepLine
34. 股票
35. ThreeLineBreak

这是您可以作为字符串传递给Razor页面中的Chart帮助程序的名称列表。

这是助手

 namespace System.Web.Helpers { public class Chart { public Chart(int width, int height, string template = null, string templatePath = null); public string FileName { get; } public int Height { get; } public int Width { get; } public Chart AddLegend(string title = null, string name = null); public Chart AddSeries(string name = null, string chartType = "Column", string chartArea = null, string axisLabel = null, string legend = null, int markerStep = 1, IEnumerable xValue = null, string xField = null, IEnumerable yValues = null, string yFields = null); public Chart AddTitle(string text = null, string name = null); public Chart DataBindCrossTable(IEnumerable dataSource, string groupByField, string xField, string yFields, string otherFields = null, string pointSortOrder = "Ascending"); public Chart DataBindTable(IEnumerable dataSource, string xField = null); public byte[] GetBytes(string format = "jpeg"); public static Chart GetFromCache(string key); public Chart Save(string path, string format = "jpeg"); public string SaveToCache(string key = null, int minutesToCache = 20, bool slidingExpiration = true); public Chart SaveXml(string path); public Chart SetXAxis(string title = "", double min = 0, double max = 0.0 / 0.0); public Chart SetYAxis(string title = "", double min = 0, double max = 0.0 / 0.0); public WebImage ToWebImage(string format = "jpeg"); public Chart Write(string format = "jpeg"); public static Chart WriteFromCache(string key, string format = "jpeg"); } } 

希望这会帮助你。

Answer 3

你可以用javascript尝试amcharts。 它非常实用..

https://www.amcharts.com/

Answer 4

您可以使用ShieldUI的MVC图表 – 一个适用于大多数商业案例的完整解决方案。

Answer 5

您也可以使用基于D3.js的NVD3图表