我想用 Chart.js 绘制折线图,​​我遵循了 Chart.js 的“入门”部分,但我仍然无法绘制示例图表。我的代码有什么问题?根据 NetBeans,一切正常..

这是代码:

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

亲切的问候

格伦

请您参考如下方法:

自从你问这个问题以来,我已经有一段时间了。我希望你已经找到了答案。如果没有,我将附加一个示例代码以使用 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>


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!