Tworzenie wykresu w formacie HTML5 za pomocą wykresu Charts.js

Chcę narysować wykres liniowy za pomocą wykresu Chart.js, poszedłem do sekcji "Pierwsze kroki" w Chart.js, ale nadal nie mogę narysować nawet przykładowego wykresu. Co jest nie tak z moim kodem? Według NetBeans to wszystko jest ok ..Tworzenie wykresu w formacie HTML5 za pomocą wykresu Charts.js

Oto kod:

<!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>

Każda pomoc jest bardziej niż mile widziane!

Link do wtyczki ->http://www.chartjs.org/docs/

poważaniem

Glenn

Źródło

2013-05-27 Glenn

Nie wydaje się mieć żadnego odniesienia do jQuery, choć jest on używany wewnątrz swojej stronie: –

Filippos, dziękuję za komentarz, to wydaje mi się, że tęskniłem, kiedy kopiowałem swój kod. Mój link do jQuery to: – Glenn

Musisz umieścić ten wiersz:

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

Pod swojej deklaracji. Ponadto nie określasz swoich opcji, więc musisz je również usunąć z połączenia.

zakończona, to powinno wyglądać:

<!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>

Źródło

2013-06-16 07:19:40 Sam

W jakiś sposób to 'window.onLoad' nigdy nie zostanie wykonane kiedy próbuję. Ale umieszczenie 'init()' w tagu body działa: '' –

masz jakiś pomysł odpowiedniego kliknięcia na punkcie i wygenerowania modalnego popup? – VjyV

Minęło I podczas skoro pytasz to pytanie. Mam nadzieję, że znalazłeś odpowiedź. Jeśli nie, dołączam przykładowy kod, aby wygenerować prosty "Wykres liniowy" za pomocą wykresu Chart.js. Jeśli uruchomisz ten fragment kodu, otrzymasz wykres liniowy.

Jeśli jakikolwiek inny podmiot grzebał w sprawie uzyskania tego działa, może pomóc im również. Moim punktem odniesienia była oficjalna strona chart.js.

Ta linia gdzie daję ścieżkę do Chart.js:

Mam nadzieję, że to pomoże!

Dzięki, 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>

Źródło

2015-10-20 21:56:02 kartik

Masz jakiś pomysł odpowiedniego kliknięcia na punkcie i wygenerowania modalnego popup? – VjyV

Tworzenie wykresu w formacie HTML5 za pomocą wykresu Charts.js

Odpowiedz

Powiązane problemy