使用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中创建图表

回答

相关问题