使用Charts.js在HTML5中創建圖表

我想用Chart.js繪製折線圖，我遵循Chart.js的「入門」部分，但我仍然無法繪製示例圖表。我的代碼有什麼問題？據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>

任何幫助都更受歡迎！

鏈接到插件 - >http://www.chartjs.org/docs/

親切的問候

格倫

來源

2013-05-27 Glenn

你似乎不具有任何jQuery的參考，雖然你的頁面內使用： –

菲利波斯茲，謝謝你的評論，它似乎我錯過了它，當我複製我的代碼。我的jQuery鏈接是： – Glenn

您需要將這一行：

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

有損你的聲明。此外，您並未定義您的選項，因此您還需要將其從通話中刪除。

完成，它應該看起來像：

<!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'永遠不會被執行當我嘗試它。但是將'init（）'放入body標籤的工作方式：'> –

你有任何想法相關的點擊和生成模式彈出？ – 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中創建圖表

回答

相關問題