2016-08-13 2 views
1

Ich arbeite an einer grundlegenden Website, die PHP-Seiten enthält. Ich hosste meine Website auf cpanel. Ich möchte diese Javascript-Bibliothek (here) in mein Projekt integrieren. Ich habe das Projekt heruntergeladen, den Inhalt aus der Quelldatei in mein Projekt kopiert und den Beispielcode getestet (here), aber auf meiner Seite wird nichts angezeigt. Ist das Importieren/Implementieren des Projekts so einfach, oder habe ich ein paar Schritte verpasst? Vielen Dank!Wie installiere ich richtig/Zugang Javascript Bibliothek

Ich entschuldige mich, wenn ich irgendwelche Begriffe missbrauchte, da mein Wissen mit Web-Entwicklung aus anderen Bereichen deutlich fehlt. Vielen Dank!

EDIT: Ich benutze keine jquery/habe es nicht installiert; Muss ich das hinzufügen?

-Code unten:

<div class="jumbotron"> 
    <h1> Test</h1> 

    <canvas id="myChart" width="400" height="400"></canvas> 
    <script type="text/javascript" src="assets/js/chart.js" charset="utf-8"> 
    var ctx = document.getElementById("myChart"); 
    var myChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
      datasets: [{ 
       label: '# of Votes', 
       data: [12, 19, 3, 5, 2, 3], 
       backgroundColor: [ 
        'rgba(255, 99, 132, 0.2)', 
        'rgba(54, 162, 235, 0.2)', 
        'rgba(255, 206, 86, 0.2)', 
        'rgba(75, 192, 192, 0.2)', 
        'rgba(153, 102, 255, 0.2)', 
        'rgba(255, 159, 64, 0.2)' 
       ], 
       borderColor: [ 
        'rgba(255,99,132,1)', 
        'rgba(54, 162, 235, 1)', 
        'rgba(255, 206, 86, 1)', 
        'rgba(75, 192, 192, 1)', 
        'rgba(153, 102, 255, 1)', 
        'rgba(255, 159, 64, 1)' 
       ], 
       borderWidth: 1 
      }] 
     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero:true 
        } 
       }] 
      } 
     } 
    }); 
    </script> 


</div> 
+0

Sie müssen jQuery nicht Chart.js verwenden. Wenn Sie jedoch eine Zeitachse verwenden möchten, benötigen Sie Moment.js. Können Sie Ihren Code veröffentlichen, der ein Diagramm anzeigen soll? – rockerest

+0

Ich habe gerade einen Ausschnitt meines Codes veröffentlicht, der die Div enthält, von der ich gehofft hatte, sie in das Diagramm einzufügen. Bitte lassen Sie mich wissen, wenn das hilfreich ist, danke! –

Antwort

-2

können Sie dies überprüfen, weil es für mich gearbeitet. Sie haben keine Anzeige erhalten, weil Sie das Quellenattribut in Ihr Skript-Tag eingefügt haben. Was ich weiß ist, dass wenn Sie ein Skript-Tag während der Arbeit in einem bestimmten Dokument haben und Sie entscheiden, etwas Code zwischen den Skript-Tags zu setzen, dann Sie src-Tag nicht enthalten, wenn der Code in einer anderen Datei ist.

<head> 
<script type="text/javascript" src="assets/js/chart.js"></script> 
</head> 
<div class="jumbotron"> 
<h1> Test</h1> 

<canvas id="myChart" width="400" height="400"></canvas> 
<script type="text/javascript"> 
var ctx = document.getElementById("myChart").getContext("2d"); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 
</script> 

enter image description here

+0

Ich habe jQuery nicht installiert (zumindest nicht nach meinem Wissen?). Kann ich ohne sie arbeiten oder brauche ich sie? Vielen Dank! –

+0

@Josh D. Ich denke, Sie sollten es installiert haben, da einige dieser Bibliotheken davon abhängen. Laden Sie auch Abhängigkeiten zuerst vor dem Skript, das die Diagramme wirklich anzeigt – SBA

+1

Diese Antwort ist falsch. Chart.js benötigt jQuery nicht und empfiehlt, dass das OP jQuery nur für den Fall enthält und ohne zu untersuchen, ob es erforderlich ist, wird kein Aufwand betrieben. – rockerest