Creazione di un grafico in HTML5 con Charts.js

Voglio disegnare un grafico a linee con Chart.js, ho seguito la sezione "Getting started" di Chart.js ma non riesco ancora a disegnare nemmeno il grafico di esempio. cosa c'è che non va nel mio codice? Secondo NetBeans è tutto ok ..Creazione di un grafico in HTML5 con Charts.js

Ecco il codice:

<!doctype html> 
    <html lang="nl"> 
     <head> 
      <meta charset="utf-8"> 
      <title>Become a member</title> 
      <script type="text/javascript" src="Chart.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     </head> 

     <body> 
      <script type="text/javascript"> 

       window.onLoad = function() { 
        init(); 
       }; 

       function init() { 
        var ctx = $("#myChart").get(0).getContext("2d"); 
        var myNewChart = new Chart(ctx).Line(data, options); 

        var data = { 
         labels: ["January", "February", "March", "April", "May", "June", "July"], 
         datasets: [ 
          { 
           fillColor: "rgba(220,220,220,0.5)", 
           strokeColor: "rgba(220,220,220,1)", 
           pointColor: "rgba(220,220,220,1)", 
           pointStrokeColor: "#fff", 
           data: [65, 59, 90, 81, 56, 55, 40] 
          }, 
          { 
           fillColor: "rgba(151,187,205,0.5)", 
           strokeColor: "rgba(151,187,205,1)", 
           pointColor: "rgba(151,187,205,1)", 
           pointStrokeColor: "#fff", 
           data: [28, 48, 40, 19, 96, 27, 100] 
          } 
         ] 
        } 
       } 

      </script> 
      <div> 
       <section> 
        <article> 
         <canvas id="myChart" width="400" height="400"> 
         </canvas> 
        </article> 
       </section> 
      </div> 
     </body> 
    </html>

Ogni aiuto è più che benvenuto!

link al plug-in ->http://www.chartjs.org/docs/

Cordiali saluti

Glenn

fonte

2013-05-27 Glenn

Non sembra avere alcun riferimento a jQuery, anche se viene utilizzato all'interno della vostra pagina: –

Filippos, grazie per il vostro commento, sembra che mi sia mancato quando ho copiato il mio codice. Il mio link a jQuery è: – Glenn

È necessario inserire questa riga:

var myNewChart = new Chart(ctx).Line(data, options);

sotto la vostra dichiarazione. Inoltre, non stai definendo le tue opzioni quindi devi rimuoverlo anche dalla chiamata.

Completato, dovrebbe assomigliare:

<!doctype html> 
<html lang="nl"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Become a member</title> 
     <script type="text/javascript" src="Chart.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    </head> 

    <body> 
     <script type="text/javascript"> 

      window.onload = function() { 
       init(); 
      }; 

      function init() { 
       var ctx = $("#myChart").get(0).getContext("2d"); 

       var data = { 
        labels: ["January", "February", "March", "April", "May", "June", "July"], 
        datasets: [ 
         { 
          fillColor: "rgba(220,220,220,0.5)", 
          strokeColor: "rgba(220,220,220,1)", 
          pointColor: "rgba(220,220,220,1)", 
          pointStrokeColor: "#fff", 
          data: [65, 59, 90, 81, 56, 55, 40] 
         }, 
         { 
          fillColor: "rgba(151,187,205,0.5)", 
          strokeColor: "rgba(151,187,205,1)", 
          pointColor: "rgba(151,187,205,1)", 
          pointStrokeColor: "#fff", 
          data: [28, 48, 40, 19, 96, 27, 100] 
         } 
        ] 
       } 

       var myNewChart = new Chart(ctx).Line(data); 
      } 

     </script> 
     <div> 
      <section> 
       <article> 
        <canvas id="myChart" width="400" height="400"> 
        </canvas> 
       </article> 
      </section> 
     </div> 
    </body> 
</html>

fonte

2013-06-16 07:19:40 Sam

In qualche modo questo 'window.onLoad' non viene mai eseguito quando ci provo Ma inserendo 'init()' nel tag body funziona: '' –

hai qualche idea di cliccare sul punto e generare popup modali? – VjyV

E 'stato io, mentre da quando hai fatto questa domanda. Spero che tu abbia trovato la risposta. In caso contrario, allego un codice di esempio per generare un semplice "grafico a linee" utilizzando Chart.js. Se si esegue questo snippet di codice, si otterrà un grafico a linee.

Se qualcun altro ha tentato di farlo funzionare, potrebbe essere d'aiuto anche a loro. Il mio punto di riferimento era la pagina ufficiale di chart.js.

Questa la linea in cui io do il percorso Chart.js:

Spero che questo aiuta!

Grazie, Kay

<!DOCTYPE HTML> 
 
<html> 
 

 
<head></head> 
 

 
<body> 
 
    <canvas id="c" width="500" height="500"></canvas> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
    <script> 
 
    var ctx = document.getElementById("c").getContext("2d"); 
 
    var data = { 
 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
     datasets: [{ 
 
     label: "My First dataset", 
 
     fillColor: "rgba(220,220,220,0.2)", 
 
     strokeColor: "rgba(220,220,220,1)", 
 
     pointColor: "rgba(220,220,220,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(220,220,220,1)", 
 
     data: [65, 59, 80, 81, 56, 55, 40] 
 
     }, { 
 
     label: "My Second dataset", 
 
     fillColor: "rgba(151,187,205,0.2)", 
 
     strokeColor: "rgba(151,187,205,1)", 
 
     pointColor: "rgba(151,187,205,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(151,187,205,1)", 
 
     data: [28, 48, 40, 19, 86, 27, 90] 
 
     }] 
 
    }; 
 
    var MyNewChart = new Chart(ctx).Line(data); 
 
    </script> 
 
</body> 
 

 
</html>

fonte

2015-10-20 21:56:02 kartik

hai qualche idea rilevante cliccando sul punto e generare popup modali? – VjyV

Creazione di un grafico in HTML5 con Charts.js

risposta

Problemi correlati