0

Então galera estou usando o chartjs num sistema aqui, mas o estilo pie e donut não exibe no sistema. Eu importei os CDN's:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>

E fiz um arquivo graph.js para colocar os codigos do chatjs e importo ele no meu head:

<code>var ctx = document.getElementById("ChartDonut");
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Pagos","Pendentes"],
        datasets: [{     
            data: [200, 137],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)'   
            ]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});</code>

O no meu html eu chamo o CANVAS normalmente:

<canvas id="chartDonut"></canvas>

Mas nem DOUGHNUT e nem PIE funcionam. Alguém sabe o pq?

1
  • Cara, leia bem a documentação do Chart.JS.. você tem o Nugget instalado? ta referenciado no seu projeto? em geral todos os gráficos funcionam de forma igual, precisa de um options e de um data.. Commented 28/09/2017 às 13:48

1 Resposta 1

0

Você possui dois problemas em seu código.

O primeiro é que o id do canvas é chartDonut e no seu script você está usando ChartDonut.

O segundo são seus options. Veja a lista do que você pode utilizar. para esse tipo de gráfico.

Veja abaixo o exemplo do seu código corrigido:

var ctx = document.getElementById("chartDonut");
var myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Pagos", "Pendentes"],
    datasets: [{
      data: [200, 137],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)'
      ]
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="chartDonut"></canvas>

Dicas de leitura:

1
  • Cara valeu mesmo! não tava conseguindo enxergar isso! @Randrade Commented 28/09/2017 às 15:36

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 .