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 !

Author: user3212730, 2014-01-29
Source

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;

 33
Author: Paweł Bejger, 2014-01-29 12:15:25

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:

  1. á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. 
    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");
    }
}
    Espero que isto te ajude.
 31
Author: Pranav Labhe, 2017-06-02 07:17:11

Pode tentar amcharts com javascript. É tão útil..

Https://www.amcharts.com/

 0
Author: mcgrawhill, 2016-05-16 06:28:59

Pode utilizar os gráficos de MVC de ShieldUI - uma solução completa que funciona na maioria dos casos de negócios.

 -1
Author: Vladimir Georgiev, 2016-01-04 20:12:34

Pode usarnvd3 Também gráficos baseados em D3.js

 -1
Author: Himanshu Patel, 2017-03-20 00:55:08