0

Estou seguindo a documentação Chats.js para implementar gráficos em meu código a estrutura do meu HTML é bem simples

<html>
  <head>
    <script type="text/javascript" src="./chart.js"></script> //Esse eu baixei através da documentação deles
    <script type="text/javascript" src="./index.js"></script>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
  </body>
</html>

E no meu javascript index.js está da seguinte forma

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Porém quando executo o código no meu navegador nada acontece, ao inspecionar os elementos com o console do navegador e ir no arquivo index.js vejo a seguinte mensagem de erro Uncaught ReferenceError: Chart is not defined , ao meu ver a importação está correta pois o arquivo chart.js está sendo importado, estou fazendo algo errado?

2
  • Aparentemente o erro é que você usou a tag de importação de css (<link>) no lugar da tag de importação javascript (<script>).
    – Benilson
    Commented 20/11/2019 às 12:58
  • @Benilson Digitei o código aqui novamente de forma resumida, foi erro de digitação, vou corrigir, porém na minha página está certo a importação de JS Commented 20/11/2019 às 13:02

3 Respostas 3

3

Verifique qual versão do arquivo você baixou, no exemplo abaixo utilizei a versão 2.8.0 e funcionou corretamente:

Veja aqui os arquivos https://cdnjs.com/libraries/Chart.js

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
  </body>
</html>

3
  • Fiz o mesmo teste aqui e também funcionou. Verifique o arquivo Chart.js
    – Rafa C.
    Commented 20/11/2019 às 13:31
  • @Marciano Machado, acabei de fazer o mesmo teste com a versão do CDN que me indicou e o resultado ainda veio em branco. Porém com isso tive uma ideia. Fiz exatamente como fez no seu exemplo, coloquei o script na mesma página e o gráfico apareceu. Porém preciso que venha de um arquivo externo a inclusão do gráfico pois tenho muitas informações nessa página e iria ficar mto poluído Commented 20/11/2019 às 13:53
  • Consegui resolver o problema, quando estava inserindo os scripts do chat.js direto no head ele não estava tendo tempo de carregar, alterei a importação para deixar dentro do body e funcionou. Obrigado pela ajuda! (Vou dar um up vote na sua resposta porque ela está correta e funcional porém não soluciona meu problema) Commented 20/11/2019 às 14:04
1

Foi necessário apenas mudar o local da importação. Pelo que entendi mantendo o plugin no cabeçalho ele não tinha tempo de carregar completamente e por isso retornava o erro Uncaught ReferenceError: Chart is not defined

<html>
  <head>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script type="text/javascript" src="./chart.js"></script>
    <script type="text/javascript" src="./index.js"></script>
  </body>
</html>

O arquivo index.js não foi alterado

0

É necessário apenas mudar o local da importação, mantendo o plugin no cabeçalho ele não tem tempo de carregar completamente e por isso retorna o erro Uncaught ReferenceError: Chart is not defined

<html>
  <head>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script type="text/javascript" src="./chart.js"></script>
    <script type="text/javascript" src="./index.js"></script>
  </body>
</html>

O arquivo index.js não foi alterado

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 .