Chart.js: chart nicht angezeigt

Ich verwenden möchte, Chart.js zu erstellen beeindruckende Diagramme in einer Webseite.

Folgenden die Dokumentation, schrieb ich den code wie folgt:

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

Das ist der Grund, warum die Grafik nicht angezeigt wird?

  • Entfernen der Teil der Frage, die beide Antworten beziehen sich auf nicht sinnvoll.
  • Obwohl in keinem Zusammenhang zu diesem speziellen Szenario möchte ich anmerken, dass wenn das Diagramm innerhalb eines hid-element (display:none) und das element wird angezeigt, nachdem das Diagramm wird nicht angezeigt. Einzige Lösung die ich fand war es zu zeigen, das element vor dem erstellen des Diagramms (calling chart.resize() wird nicht funktionieren). Dieser erwischte mich zweimal, so daß mit diesem Kommentar werde ich nicht wieder vergessen...
  • hahaha XD
InformationsquelleAutor vdenotaris | 2014-07-21
  1. 19

    Erste, Sie haben, um Ihr Skript nach dem Leinwand-Erklärung.
    Löschen Sie danach die Torte Optionen (oder definieren).

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

    InformationsquelleAutor Julien Malige
  2. 23

    Fügen Sie ein div-Element außerhalb des canvas-element:

    HTML:

    <div><canvas id="countries" width="600" height="400"></canvas></div>

    • OMG DIESE! danke!!!
    • Wow. Ich habe nie realisiert, dass dies eine Sache. Können Sie bitte helfen mir zu verstehen, diese ein bisschen besser, warum es nur funktioniert, wenn die Leinwand ist in einem div. Ich habe ein Eckiges 7 setup und das funktioniert nur, wenn eingewickelt in ein div-Element in einer Komponente Vorlagen.
    • bcos charjs Prüfungen für das div-element in den plot-Diagramm in das canvas-element.
    • nur ein div kann sich die situation ändern .... ooops
    InformationsquelleAutor Shrinivas Kalangutkar
  3. 1

    pieOptions null ist 🙂 einfach entfernen Sie es von Ihrem .Pie () - Aufruf.

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

    Und halten Sie Ihre browser-Skript-Konsole öffnen, damit Sie sehen können alle die wertvolle Ausgabe bietet Ihnen 🙂

    • Es funktioniert immer noch nicht. Hinweis: ich bin mit Chrome.
    • ich habe gerade besuchten link in Chrome und Ihre PieChart dargestellt wird. können Sie überprüfen und finden die Fehler in der Konsole?
    • Ich habe den Fehler behoben, indem Sie die folgenden Julien Malige Vorschlag. Danke trotzdem
    • ja, ich denke, ich sollte copy/Paste deinen code, wie er Tat. meine jsbin macht das gleiche wie sein Vorschlag obwohl. Im Allgemeinen sollten Sie immer Ihre Skripte an der Unterseite.
    InformationsquelleAutor Brunis
Schreibe einen Kommentar