Chart.js: grafico non visualizzato

Mi piacerebbe utilizzare Chart.js per creare grafici sbalorditivi in una pagina web.Chart.js: grafico non visualizzato

A seguito della documentazione, ho scritto il codice come segue:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"/> 
    <title>Chart.js demo</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script> 
</head> 

<body> 
    <script> 
     var pieData = [ 
      { 
       value: 20, 
       color:"#878BB6" 
      }, 
      { 
       value : 40, 
       color : "#4ACAB4" 
      }, 
      { 
       value : 10, 
       color : "#FF8153" 
      }, 
      { 
       value : 30, 
       color : "#FFEA88" 
      } 
     ]; 
     // Get the context of the canvas element we want to select 
     var countries= document.getElementById("countries").getContext("2d"); 
     new Chart(countries).Pie(pieData); 
    </script> 

    <h1>Chart.js Sample</h1> 
    <canvas id="countries" width="600" height="400"></canvas> 
</body> 

</html>

Quale è il motivo per cui non viene visualizzato il grafico?

fonte

2014-07-21 vdenotaris

rimozione della parte della domanda, che entrambe le risposte si riferiscono a non ha senso. –

Anche se non correlato a questo specifico scenario, vorrei commentare che se il grafico viene creato all'interno di un elemento nascosto ('display: none') e l'elemento viene mostrato dopo, il grafico non verrà visualizzato. Solo la soluzione alternativa che ho trovato era mostrare l'elemento prima di creare il grafico (chiamare 'chart.resize()' non funzionerà neanche). Questo mi ha beccato due volte così con questo commento che non dimenticherò di nuovo ... – Parziphal

@Parziphal hahaha XD – Xsmael

In primo luogo, è necessario inserire lo script dopo la dichiarazione di tela. Quindi eliminare le opzioni della torta (o definirle).

<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Chart.js demo</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script> 
</head> 
<body> 


    <h1>Chart.js Sample</h1> 

    <canvas id="countries" width="600" height="400"></canvas> 
     <script> 
     var pieData = [ 
      { 
       value: 20, 
       color:"#878BB6" 
      }, 
      { 
       value : 40, 
       color : "#4ACAB4" 
      }, 
      { 
       value : 10, 
       color : "#FF8153" 
      }, 
      { 
       value : 30, 
       color : "#FFEA88" 
      } 
     ]; 
     // Get the context of the canvas element we want to select 
     var countries= document.getElementById("countries").getContext("2d"); 
     new Chart(countries).Pie(pieData); 
    </script> 
</body>

fonte

2014-07-21 12:56:48

pieOptions è null :) è sufficiente rimuoverlo dalla chiamata .Pie().

http://jsbin.com/decagicu/1/

E mantenere la vostra console di script del browser aperte, in modo da poter vedere tutto l'output prezioso che fornisce :)

fonte

2014-07-21 12:53:07 Brunis

Ancora non funziona. Nota: sto utilizzando Chrome. – vdenotaris

ho appena visitato quel collegamento in Chrome e viene visualizzato il tuo PieChart. puoi ispezionare e trovare errori nella console? – Brunis

Ho corretto l'errore seguendo il suggerimento di Julien Malige. Grazie comunque – vdenotaris

Chart.js: grafico non visualizzato

risposta

Problemi correlati