Inquiridor
Usando Chart.js no Visual Studio 2010

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.