Charts.jsを使用したHTML5でのチャートの作成

Chart.jsで折れ線グラフを描きたいので、Chart.jsの 'Getting started'セクションに従っていますが、まだサンプルチャートを描画することはできません。私のコードで何が間違っていますか？ NetBeansのによれば、ここで Charts.jsを使用したHTML5でのチャートの作成

がコードです。..すべて大丈夫だ：

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

すべてのヘルプは歓迎以上です！あなたの宣言の下

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

： - プラグインに

リンク>http://www.chartjs.org/docs/

種類は、あなたがこの行を配置する必要があるグレン・

出典

2013-05-27 Glenn

それはあなたのページ内で使用されているが、あなたは、jQueryのへの参照を持っていないように見えます： –

Filippos、あなたのコメントのためにそれをあなたに感謝し、私のコードをコピーしたときに私はそれを逃したようだ。 jQueryへの私のリンクは： – Glenn

について。また、オプションを定義していないため、コールからもそのオプションを削除する必要があります。完成し

が、それは次のようになります。あなたがこの質問をしたので、一方で

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

出典

2013-06-16 07:19:40 Sam

何とかこの 'window.onLoad'は決して実行されません私はそれを試してみる。しかし、 'body onLoad =" init（） ">' –

には、ポイントをクリックしてモーダルポップアップを生成するアイデアはありますか？ – VjyV

それは私をされています。私はあなたが答えを見つけたことを願っています。そうでない場合は、Chart.jsを使用して簡単な「折れ線グラフ」を生成するためのサンプルコードを添付しています。このコードスニペットを実行すると、折れ線グラフが表示されます。

他の人がこの作業に迷ったら、それも役に立ちます。私の参照点はchart.js公式ページでした。

この私がChart.jsへのパスを与える行：

私はこれが役に立てば幸い！

おかげで、ケイ

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

出典

2015-10-20 21:56:02 kartik

あなたはポイントをクリックしてモーダルポップアップを生成するという考えをお持ちですか？ – VjyV

Charts.jsを使用したHTML5でのチャートの作成

答えて

関連する問題