4
respostas

Chart.js - Donut Chart não aparece

Oi :) Quero usar um gráfico Donut em uma página. Por enquanto, estou só testando em outro arquivo, usando o código disponível pra download no site deles, mas o gráfico não aparece :((

Meu código:

<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">

[...]

<script src="js/Chart.js"></script>


</head>
<body>
    <div class ="container">
        <div class="box">
            <div class="box-chart">

                <canvas id="GraficoDonut"></canvas>

                <script type="text/javascript">

                    var options = {
                        responsive:true                    
                    };

                    var data = [
                    {
                        value: 8,
                        color:"#F7464A",
                        highlight: "#FF5A5E",
                        label: "Vermelho"
                    },
                    {
                        value: 8,
                        color: "#46BFBD",
                        highlight: "#5AD3D1",
                        label: "Azul"
                    },
                    {
                        value: 15,
                        color: "#FDB45C",
                        highlight: "#FFC870",
                        label: "Amarelo"
                    }
                    ]

                    window.onload = function(){

                        var ctx = document.getElementById("GraficoDonut").getContext("2d");
                        var PizzaChart = new Chart(ctx).Doughnut(data, options);
                        }
                    }  
                </script>                         

                </div>


            </div> <!-- fim box -->    
        </div><!--fim container -->    

    </body>
    </html>

css

.box-chart {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
}

container e box como já estavam antes de testar o donut

.container {
    width: 100vw;
    height: 110vh;
    background: #6C7A89;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.box {
    width: 1020px;
    height: 800px;
    background: #fff;
    border-radius: 30px;
    justify-content: center;
    margin-top:100px;
    margin-bottom:30px;
    padding-bottom:100px;

}
4 respostas

O nome do arquivo na pasta veio com o nome js/Chart.js maiusculo? E a tag <script>, tente colocar ela após o conteúdo html da página próximo ao fechamento da tag body

Oi, Mario! Sim :)

Movendo a tag para o body, mudou o resultado?

não :(

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software