【发布时间】：2023-03-05 00:46:03
【问题描述】：
如何使用 MVC 的 Razor Chart Helper 以图表格式显示统计数据？
【问题讨论】：
标签： asp.net-mvc-3 razor
【发布时间】：2023-03-05 00:46:03
【问题描述】：
当您想以图形形式显示数据时，可以使用图表助手。 Chart 帮助器可以渲染以各种图表类型显示数据的图像。
您可以为图表创建一个具有剃刀代码的视图，如下所示（假设它的 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();
}
Array 中的饼图
@{
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 用作图像的源代码。
例如
<html>
<body>
<img src="MyChart.cshtml" />
<!-- or <img src='@Url.Action("Controler","ActionNameOfChartRenderingView")' />-->
<body>
<html>
Theams 排行榜
原版在白色背景上显示红色列。
蓝色在蓝色渐变背景上显示蓝色列。
绿色在绿色渐变背景上显示蓝色列。
黄色在黄色渐变背景上显示橙色列。
Vanilla3D在白色背景上显示 3-D 红色列。
SeriesChartType 枚举支持以下内容：
- 区域
- 酒吧
- 箱线图
- 气泡
- 烛台
- 列
- 甜甜圈
- 错误栏
- 快线
- FastPoint
- 漏斗
- 卡吉
- 行
- 派
- 点
- PointAndFigure
- 极地
- 金字塔
- 雷达
- 范围
- 范围栏
- 范围列
- 莲子
- 样条线
- 样条区域
- 样条范围
- 堆叠区域
- StackedArea100
- 堆叠条
- StackedBar100
- 堆叠列
- StackedColumn100
- 阶梯线
- 库存
- 三行中断
这是您可以作为字符串传递给 Razor 页面中的图表助手的名称列表。
这是帮手
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");
}
}
示例 ...
控制器
namespace MVC3ChartTest.Controllers
{
public class ChartsController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult BasicChart()
{
return View();
}
public ActionResult BasicChartWithMasterPage()
{
return View();
}
}
}
非强类型视图
@model dynamic
@{
View.Title = "BasicChart";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Basic Chart</h2>
<p>
@{
var key = new Chart(width: 600, height: 400)
.AddTitle("Staff Mobility")
.AddSeries(
name: "Employee",
xValue: new[] { "Jan", "Feb", "Mar", "Api", "May", "Jun", "Jul", "Aug", "Sep"},
yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"}
)
.Write();
}
</p>
BasicChartWithMasterPage
@model dynamic
@{
View.Title = "BasicChartWithMasterPage";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>BasicChartWithMasterPage</h2>
<p><img src="BasicChart" /> </p>
【讨论】：
示例 2
型号
//other omitted...
using System.Collections;
using System.Web.Helpers;
namespace MVC3ChartTest.Models
{
internal class PieChartData
{
public string Title { get; set; }
public Category_Sales_for_1997[] Data { get; set; }
}
public class NorthModel
{
NorthwindEntities db = new NorthwindEntities();
List<Category_Sales_for_1997> pieData;
public Chart PieChart
{
get
{
return BuildServerPieChart();
}
}
public NorthModel()
{
pieData = db.Category_Sales_for_1997.ToList<Category_Sales_for_1997>();
}
//other omitted...
返回图表的函数
private Chart BuildServerPieChart()
{
var data = new PieChartData
{
Title = "Total: " + (from y in pieData select y.CategorySales).Sum().ToString(),
Data = (from x in pieData orderby x.CategoryName descending select x).ToArray(),
};
return BindChartData(data);
}
private Chart BindChartData(PieChartData data)
{
Chart chart = new Chart(
width: 400,
height: 300,
template: ChartTheme.Green);
chart.AddTitle(data.Title);
chart.AddLegend(title: "Lengend Title", name: null);
ArrayList x_ValueArray = new ArrayList();
ArrayList y_ValuesArray = new ArrayList();
for (int i = 0; i < data.Data.Length; i++)
{
x_ValueArray.Add(data.Data[i].CategoryName);
y_ValuesArray.Add(data.Data[i].CategorySales);
}
chart.AddSeries(
name: "Employee",
chartType: "Pie",
axisLabel: "Name",
xValue: x_ValueArray,
yValues: y_ValuesArray);
return chart;
}
控制器动作
public ActionResult Index()
{
NorthModel model = new NorthModel();
return View(model);
}
查看
@model MVC3ChartTest.Models.NorthModel
@{
View.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>
@{Model.PieChart.Write();}
</div>
【讨论】：