use*_*730 22 c# asp.net-mvc charts razor asp.net-mvc-4
是否可以通过ASP.NET MVC 4(Razor)使用C#绘制图表(曲线,直方图,圆).我正在尝试从我的数据库中提取的数据制作一些图形.但是,我找不到如何.
有什么建议吗？
非常感谢 !
Paw*_*ger 34
有一个图表助手,它可以很好地与Razor配合使用,使您可以非常轻松地构建数据的图表,直方图和其他图形表示.
或者您可以尝试使用一些jQuery/HTML5/Javascript库:
Highcharts是一个用纯HTML5/JavaScript编写的图表库,为您的网站或Web应用程序提供直观的交互式图表.
jqPlot是jQuery Javascript框架的绘图和图表插件.
Raphaël是一个小型JavaScript库,可以简化您在Web上使用矢量图形的工作.
其中有更多,上面只是一些例子;
Pra*_*bhe 33
如果要以图形形式显示数据,可以使用Chart helper.图表帮助程序可以呈现以各种图表类型显示数据的图像.
你可以创建一个具有图表剃刀代码的视图,如下所示(比如说它的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.
恩.
<html>
<body>
<img src="MyChart.cshtml" />
<!-- or <img src='@Url.Action("Controler","ActionNameOfChartRenderingView")' />-->
<body>
<html>
图表Theams
香草 显示在白色背景的红色专栏.
蓝色 显示蓝色渐变背景上的蓝色列.
绿色 显示在绿色梯度背景的蓝色专栏.
黄色 显示在黄色梯度背景的橙色专栏.
Vanilla3D 在白色背景上显示三维红色列.
SeriesChartType枚举支持以下内容:
这是您可以作为字符串传递给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");
}
}
希望这会帮助你.
| 归档时间： |
|
| 查看次数： |
70394 次 |
| 最近记录： |