Можно ли рисовать диаграммы (кривые, гистограммы, круг) с помощью C# через ASP.NET MVC 4 (Razor). Я пытаюсь сделать некоторые графики из данных, извлеченных из моей базы данных. Но я не могу найти, как это сделать.чертежные диаграммы в ASP.NET MVC 4 (Razor, C#) веб-сайты
Любые предложения, пожалуйста?
Большое спасибо!
Существует Chart helper, который отлично работает с Razor и позволяет вам легко создавать графики, гистограммы и другие графические изображения ваших данных.
Или вы могли бы попробовать использовать некоторые библиотеки JQuery/HTML5/Javascript:
Highcharts является картирование библиотека, написанная на чистом HTML5/JavaScript, предлагая интуитивно понятные, интерактивные диаграммы для вашего веб-сайта или веб-приложения.
jqPlot является плагином и графическим плагином для javascript-фреймворка jQuery.
Raphaël - небольшая библиотека JavaScript, которая должна упростить работу с векторной графикой в Интернете.
Их больше, приведенные выше приведены лишь в некоторых примерах;
Вы можете использовать контрольную панель управления Telerik MVC. Синтаксис поддержки бритвы. Просто пойдите в Google.
Если вы хотите отображать свои данные в графической форме, вы можете использовать хелпер диаграммы. Помощник диаграммы может отображать изображение, отображающее данные в разных типах диаграмм.
Вы можете создать представление с кодом бритвы для диаграммы следующим образом (скажем, его MyChart.cshtml).
Гистограмма из массива с темой
@{
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();
}
Гистограмма Использование DB Query
@{
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 изображения.
ex.
<html>
<body>
<img src="MyChart.cshtml" />
<!-- or <img src='@Url.Action("Controler","ActionNameOfChartRenderingView")' />-->
<body>
<html>
Диаграмма Theams
Vanilla Отображает красные колонны на белом фоне.
Blue Показаны синие столбцы на синем фоне градиента.
Зеленый Отображает синие столбцы на зеленом фоне градиента.
Желтый Отображает оранжевые колонны на желтом фоне градиента.
Vanilla3D Отображает 3-мерные красные столбцы на белом фоне.
SeriesChartType перечисление поддерживает следующие действия:
Это список имен, которые вы можете передать, как строки, помощнику Chart на странице Razor.
Это Helper
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");
}
}
Надеется, что это поможет.
Спасибо, Пранав. Как мы можем нарисовать диаграмму водопада, подобную этой (http://jsfiddle.net/thein/pkkzmtyL/), используя вспомогательную диаграмму MVC? –
Вы можете использовать ShieldUI's MVC Charts - полное решение, работающее в большинстве бизнес-кейсов.
Вы можете попробовать amcharts с javascript. Это так полезно ..
Вы можете использовать NVD3 диаграммы тоже на основе D3.js
Вы уверены, что диаграмма Helper может быть использован в ASP.Net MVC? По вашей ссылке кажется, что ее можно использовать только в веб-страницах ASP.Net. –
@ Вспомогательный помощник LuisGouveia может также использоваться в MVC http://csharpcode.org/asp-net-mvc-draw-chart-using-razor-chart-helper/ и http://www.dotnetcurry.com/ShowArticle. aspx? ID = 597 –