Можно ли рисовать диаграммы (кривые, гистограммы, круги) с помощью С# через ASP.NET MVC 4 (Razor). Я пытаюсь сделать некоторые графики из данных, извлеченных из моей базы данных. Но я не могу найти, как это сделать.
Любые предложения, пожалуйста?
Спасибо большое!
Существует Помощник диаграммы, который отлично работает с Razor и позволяет вам легко создавать графики, гистограммы и другие графические представления ваших данных.
Или вы можете попробовать использовать некоторую библиотеку jQuery/HTML5/Javascript:
Highcharts - это графическая библиотека, написанная на чистом HTML5/JavaScript, предлагающая интуитивные интерактивные диаграммы на ваш веб-сайт или веб-приложение.
jqPlot является плагином и графическим плагином для jQuery Javascript.
Raphaël - небольшая библиотека JavaScript, которая должна упростить вашу работу с векторной графикой в Интернете.
Их больше, приведенные выше - лишь некоторые примеры;
Если вы хотите отображать свои данные в графической форме, вы можете использовать хелпер Chart. Помощник диаграммы может отображать изображение, отображающее данные в разных типах диаграмм.
Вы можете создать представление с кодом бритвы для диаграммы следующим образом (скажем, его 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 изображения.
ех.
<html>
<body>
<img src="MyChart.cshtml" />
<!-- or <img src='@Url.Action("Controler","ActionNameOfChartRenderingView")' />-->
<body>
<html>
Диаграммы Theams
Ваниль Отображает красные столбцы на белом фоне.
Синий Отображает синие столбцы на синем фоне градиента.
Зеленый Отображает синие столбцы на фоне зеленого градиента.
Желтый Отображает оранжевые столбцы на желтом фоне градиента.
Vanilla3D Отображает трехмерные красные столбцы на белом фоне.
Перечисление SeriesChartType поддерживает следующее:
Это список имен, которые вы можете передать в качестве строк для хелпера диаграммы на странице 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");
}
}
Надеюсь, это поможет вам.
Вы можете попробовать amcharts с javascript. Это так полезно.
Вы можете использовать контроль диаграммы Telerik MVC. Он поддерживает синтаксис бритвы. Просто выполните его.
Вы можете использовать ShieldUI MVC Charts - полное решение, работающее в большинстве бизнес-случаев.
Вы можете использовать NVD3 графики, основанные на D3.js