4

Estou desenvolvendo um sistema que precisa exibir gráficos de colunas.

O sistema esta usando Bootsrap e MVC 4 C#.

Alguém sabe me dizer se há algum framework para criação de gráficos?

1

2 Respostas 2

1

Tem um presente no próprio ASP.NET MVC que faz gráficos de colunas facilmente (ele também possui os outros modelos). No System.Web.Helpers.Chart você cria uma instância e trabalha com os dados nessa class.

Exemplo:

Na sua View coloque esse trecho de código:

<img src="@Url.Action("Imagem", "Estudo")" border="0" />

E no Controller esse método:

public void Imagem()
{
    ICollection<Grafico> grafico = new List<Grafico>(){
        new Grafico(){ Titulo = "Campo 1", Soma = 500M},
        new Grafico(){ Titulo = "Campo 2", Soma = 100M},
        new Grafico(){ Titulo = "Campo 3", Soma = 200M},
        new Grafico(){ Titulo = "Campo 4", Soma = 300M},
        new Grafico(){ Titulo = "Campo 5", Soma = 400M},
        new Grafico(){ Titulo = "Campo 5", Soma = 100M}
    };      

    System.Web.Helpers.Chart ch = 
                new System.Web.Helpers.Chart(500, 400, ChartTheme.Blue);
    ch.AddSeries(
        name: "Campo",
        chartType: "Column",
        axisLabel: "Campo",
        xField: "Campo",
        yFields: "Soma",
        xValue: grafico.Select(x => x.Titulo).ToArray(),
        yValues: grafico.Select(x => x.Soma).ToArray()
        ).AddLegend();

    ch.ToWebImage()
        .Write();
}

Resultado:

inserir a descrição da imagem aqui


Com DotNet.Highcharts, baixe o pacote de instalação pelo Package Manage Console, com o comando:

PM> Install-Package DotNet.Highcharts

Na View:

Obs: Configure sua View dessa maneira.

@model DotNet.Highcharts.Highcharts
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Grafico</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/highcharts.js"></script>
</head>
<body>
    <div> 
        @(Model)
    </div>
</body>
</html>

No Controller esse método:

public ActionResult Grafico()
{
    ICollection<Grafico> grafico = new List<Grafico>(){
        new Grafico(){ Titulo = "Campo 1", Soma = 500M},
        new Grafico(){ Titulo = "Campo 2", Soma = 100M},
        new Grafico(){ Titulo = "Campo 3", Soma = 200M},
        new Grafico(){ Titulo = "Campo 4", Soma = 300M},
        new Grafico(){ Titulo = "Campo 5", Soma = 400M},
        new Grafico(){ Titulo = "Campo 6", Soma = 100M}
    };

    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
    .InitChart(new DotNet.Highcharts.Options.Chart
    {
        DefaultSeriesType = ChartTypes.Column,
        MarginRight = 130,
        MarginBottom = 25,
        ClassName = "chart"
    })
    .SetXAxis(new XAxis
    {
        Categories = grafico.Select(x => x.Titulo).ToArray()
    }).SetSeries(new Series
    {
        Data = new Data(grafico.Select(x => (object)x.Soma).ToArray())
    });
    chart.SetTitle(new Title() { Text = "Campos" });
    chart.SetPlotOptions(new PlotOptions() { Bar = new PlotOptionsBar() { ShowInLegend = true, Visible = true } });            

    return View(chart);
}    

Resultado:

inserir a descrição da imagem aqui

0

Tem alguns. Vou colocar pra você alguns deles:

Ou, ainda, a seguinte lista de pacotes pode ser útil:

https://www.nuget.org/packages?q=charts

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .