none
Usando Chart.js no Visual Studio 2010 RRS feed

  • Pergunta

  • Olá pessoal,

    Estou tentando usar o Chart.js no Visual Studio 2010 + VB e tudo o que consegui fazer foi apenas criar o canva mas não está desenhando nada dentro dele. Por enquanto estou apenas testando para depois implementar de fato. Abaixo estou disponibilizando o que fiz até agora:

    Página ASPX:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="grafico.aspx.vb" Inherits="graficos_grafico" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Graficos</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
    
        <link href="../Styles/cssGrafico.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            
            <canvas id="myChart"></canvas>
            <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    
            <asp:Label ID="LbGrafico" runat="server"></asp:Label>
    
        </div>
        </form>
    </body>
    </html>
    

    Página de Código (VB):

    Partial Class graficos_grafico
        Inherits System.Web.UI.Page
        Private Fn As New Funcoes.classFuncao
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                LbGrafico.Text = "<script>" & _
                                "var ctx = document.getElementById('myChart').getContext('2d');" & _
                                "var chart = new Chart(ctx, {" & _
                                "    // The type of chart we want to create" & _
                                "Type 'line'," & _
                                "" & _
                                "    // The data for our dataset" & _
                                "    data: {" & _
                                "        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July']," & _
                                "        datasets: [{" & _
                                "Label 'My First dataset'," & _
                                "backgroundColor 'rgb(255, 99, 132)'," & _
                                "borderColor 'rgb(255, 99, 132)'," & _
                                "            data: [0, 10, 5, 2, 20, 30, 45]" & _
                                "        }]" & _
                                "    }," & _
                                "" & _
                                "    // Configuration options go here" & _
                                "    options: {}" & _
                                "};</script>"
    
            End If
    
        End Sub
    
    End Class
    

    Depois, ainda mudei o código para este abaixo, na tentativa de visualizar algo mas, ainda assim, só cria o canva mas não mostra nada.

    Código Alterado:

    LbGrafico.Text = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>" & _
                                "<html xmlns='http://www.w3.org/1999/xhtml'>" & _
                                "    <head>" & _
                                "        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>" & _
                                "        <title>Gráficos usando Chart.js</title>" & _
                                "        <link href='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css'/>" & _
                                "        <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>" & _
                                "        <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js'></script>" & _
                                "    </head>" & _
                                "" & _
                                "    <body>" & _
                                "" & _
                                "        <canvas id='myChart'></canvas>" & _
                                "        <script src='https://cdn.jsdelivr.net/npm/chart.js@2.8.0'></script>" & _
                                "" & _
                                "        <script>" & _
                                "		var ctx = document.getElementById('myChart').getContext('2d');" & _
                                "		var chart = new Chart(ctx, {" & _
                                "			// The type of chart we want to create" & _
                                "type:       'pie'," & _
                                "" & _
                                "			// The data for our dataset" & _
                                "			data: {" & _
                                "				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July']," & _
                                "				datasets: [{" & _
                                "label:      'My First dataset'," & _
                                "backgroundColor:  'rgb(255, 99, 132)'," & _
                                "borderColor:  'rgb(255, 99, 132)'," & _
                                "					data: [0, 10, 5, 2, 20, 30, 45]" & _
                                "				}]" & _
                                "			}," & _
                                "" & _
                                "			// Configuration options go here" & _
                                "			options: {}" & _
                                "		});" & _
                                "	</script>" & _
                                "" & _
                                "    </body>" & _
                                "</html>"

    Isso deveria ser bastante simples de fazer, até porque no Dreamweaver (onde o segundo código é baseado) funcionou de boa, sem problema algum. Então pergunto, em aplicações ASP.NET precisa ser implementado algo mais para que isso funcione?

    Tenho um outro modelo em que uso o Chart do Google e não tenho problema algum, exceto a responsividade. Vou deixar aqui como exemplo pra quem precisar. Pode não ser a forma mais elegante ou a mais correta de usá-lo mas, com certeza, foi a única que consegui usar dentro de meus conhecimentos e que ficou bem simples e é a mesma ideia que quero usar com o Chart.js.

    Meu código usando Google Chart

    Partial Class administrador_consulta_consGraficoInscritos
        Inherits System.Web.UI.Page
        Private Inscricoes As New DETI.objInscricao
        Private Fn As New Funcoes.classFuncao
    
        Private Sub MontaGrafico(ByVal pDados As String, ByVal pTitulo As String)
            Dim pHTML As String
            pHTML = ""
    
            If Trim(pDados) = "" Then
                pHTML = ""
                LbDados.Text = pHTML
            Else
                If Trim(pDados) <> "" Then
                    If Trim(pTitulo) <> "" Then pTitulo = " title:'" & pTitulo & "', " Else pTitulo = ""
    
                    pHTML = "<html> " & _
                                    "  <head> " & _
                                    "      <link href='../../Styles/cssPrincipal.css' rel='stylesheet' type='text/css' /> " & _
                                    "      <link href='../../bootstrap-4.5.2-dist/css/bootstrap.css' rel='stylesheet' type='text/css' /> " & _
                                    "      <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> " & _
                                    "      <script type='text/javascript'> " & _
                                    "      google.charts.load('current', {packages:['corechart']}); " & _
                                    "      google.charts.setOnLoadCallback(drawChart); " & _
                                    "      function drawChart() { " & _
                                    "        var data = google.visualization.arrayToDataTable([ " & _
                                    "          ['CURSO', 'QUANTIDADE'], " & _
                                    pDados & _
                                    "        ]); " & _
                                    " " & _
                                    "        var options = { " & _
                                    "          " & pTitulo & _
                                    "          pieHole: 0.4, " & _
                                    "          legend:{position:'bottom'}, " & _
                                    "          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}}, " & _
                                    "          vAxis: {minValue: 0} " & _
                                    "        }; " & _
                                    " " & _
                                    "        var chart = new google.visualization.PieChart(document.getElementById('donutchart')); " & _
                                    "        chart.draw(data, options); " & _
                                    "      } " & _
                                    "    </script> " & _
                                    "  </head> " & _
                                    "  <body> " & _
                                    "       <div id='chart_div_google_user_count' style='height:300px;'>" & _
                                    "           <!-- <div id='donutchart' class='chart' style='width: 900px; height: 500px;'></div> --> " & _
                                    "           <div id='donutchart' class='chart'></div> " & _
                                    "       </div>" & _
                                    "  </body> " & _
                                    "</html>"
                    LbDados.Text = pHTML
                End If
            End If
    
        End Sub
    
        Private Sub PovoaGrafico()
            Dim Ds As Data.DataSet
            Dim Dr As Data.DataRow
            Dim pDados As String
            pDados = ""
    
            Ds = Inscricoes.ConsultarGraficoInscritos(" GETDATE() BETWEEN F.DATAINICIAL AND F.DATAFINAL ", "")
    
            If Not Ds Is Nothing Then
                If Ds.Tables(0).Rows.Count > 0 Then
                    For I As Integer = 0 To Ds.Tables(0).Rows.Count - 1
                        Dr = Ds.Tables(0).Rows(I)
                        pDados = pDados & "['" & Dr("CODIGO") & "', " & Dr("CONTAR") & "]   "
                    Next
                    pDados = Replace(Trim(pDados), "   ", ", ")
                    LbDados.Text = Fn.GraficoGooglePiza(pDados, "")
                End If
            Else
                If Ds Is Nothing Then
                    LbDados.Text = ""
                End If
            End If
    
        End Sub
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                hfContador.Value = 0
                PovoaGrafico()
    
            End If
    
        End Sub
    
        Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
            hfContador.Value = hfContador.Value + 1
    
            If hfContador.Value = 60 Then
                PovoaGrafico()
                hfContador.Value = 0
            End If
    
        End Sub
    
    End Class
    

    Grato,

    Ilano.

    sexta-feira, 1 de janeiro de 2021 14:45