none
Usando Chart.js no Visual Studio 2010 RRS feed

 > 

  • Pergunta

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |