Erstellen eines Diagramms in HTML5 mit Charts.js

Ich soll zeichnen Sie eine Linie Diagramm mit Chart.js ich folgte dem "Getting started" - Abschnitt Chart.js aber ich bin noch nicht in der Lage zu zeichnen, auch das Beispiel-Diagramm. Was ist falsch an meinem code? Nach NetBeans-es ist alles ok ..

Hier der code:

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

Jede Hilfe ist mehr als willkommen!

Link zu dem plug-in -> http://www.chartjs.org/docs/

Freundlichen GRÜßEN

Glenn

Sie nicht scheinen, um eine Referenz zu jQuery, obwohl Sie innerhalb Ihrer Seite:
Filippos, ich danke Ihnen für Ihren Kommentar, es scheint, ich es verpasst, wenn ich kopiert mein code. Mein link zu jQuery ist : <script src="</script" >ajax.googleapis.com/ajax/libs/jquery/1.9.1/...>

InformationsquelleAutor Glenn | 2013-05-27

  1. 9

    Müssen Sie diese Zeile:

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

    Unter Ihre Erklärung. Darüber hinaus sind Sie nicht definieren Sie Ihre Optionen, so müssen Sie auch entfernen, die aus dem call.

    Abgeschlossen, sollte es so Aussehen:

    <!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>
    Irgendwie window.onLoad wird nie ausgeführt, wenn ich es versuche. Aber setzen init() in den body-tag funktioniert: <body onLoad="init()">
    haben Sie eine Idee relevant klicken Sie auf den Punkt und erzeugen modal popup ?

    InformationsquelleAutor Sam

Schreibe einen Kommentar