desenhar gráficos em ASP.NET sites da MVC 4 (Razor, c#) [fechados]
é possível desenhar gráficos (curvas, histograma, círculo) usando C# via ASP.NET MVC 4 (Razor). Estou a tentar fazer gráficos a partir de dados extraídos da minha base de dados. Mas não consigo descobrir como.
Alguma sugestão, por favor ? Muito obrigado !5 answers
Existe umauxiliar de gráficos , que funciona muito bem com Razor e permite-lhe construir gráficos, histogramas e outras representações gráficas dos seus dados com bastante facilidade.
Ou pode tentar usar alguma biblioteca jQuery / HTML5/ Javascript:
Highcharts é uma biblioteca de mapas escrita em HTML5/JavaScript puro, oferecendo gráficos intuitivos e interativos para o seu site ou aplicação web.
JqPlot é uma trama e um 'plugin' de desenho para a plataforma de Javascript jQuery.
Raphaël é uma pequena biblioteca JavaScript que deve simplificar o seu trabalho com gráficos vetoriais na web.
Há mais deles, OS acima são apenas alguns exemplos;
Quando quiser mostrar os seus dados de forma gráfica, poderá usar o Assistente de gráficos. O Auxiliar de gráfico pode renderizar uma imagem que exibe dados em uma variedade de tipos de gráfico.
Você pode criar uma vista com o código razor para o gráfico da seguinte forma(vamos dizer o seu MyChart.cshtml).
Gráfico de barras a partir de uma lista com o tema
@{
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();
}
Gráfico circular do Array
@{
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();
}
Gráfico circular a partir de uma lista com o tema
@{
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();
}
Gráfico de barras utilizando a pesquisa DB
@{
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();
}
Pode usar este gráfico. views / PartialView sempre que necessário como uma src da imagem.
Ex.
<html>
<body>
<img src="MyChart.cshtml" />
<!-- or <img src='@Url.Action("Controler","ActionNameOfChartRenderingView")' />-->
<body>
<html>
Chart Theams
Vanilla mostra colunas vermelhas sobre um fundo branco.
O Blue mostra colunas azuis num fundo de gradiente azul.
O Verde mostra colunas azuis num fundo de gradiente verde.
O amarelo mostra colunas cor-de-laranja sobre um fundo de gradiente amarelo.
O Vanilla3D mostra colunas vermelhas 3-D sobre um fundo branco.
A enumeração SeriesChartType suporta o seguinte:
- área é a lista de nomes que você pode passar, como strings, para o ajudante gráfico em uma página de navalha.
Este é o ajudante.
Espero que isto te ajude.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"); } }
Pode tentar amcharts com javascript. É tão útil..
Pode utilizar os gráficos de MVC de ShieldUI - uma solução completa que funciona na maioria dos casos de negócios.
Pode usarnvd3 Também gráficos baseados em D3.js