使用Charts.js在HTML5中创建图表

时间：2013-05-27 15:00:55

标签： charts html5-canvas

我想用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>

非常欢迎任何帮助！

链接到插件 - ＆gt; http://www.chartjs.org/docs/

亲切的问候

格伦

3 个答案:

答案 0 :(得分：11)

自从你提出这个问题以来，我一直都是这样。我希望你找到了答案。如果没有，我附上一个示例代码，使用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>

答案 1 :(得分：9)

你需要放置这一行：

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>

答案 2 :(得分：1)

根据chartjs的新版本2.8.0。

official documentation

这是一个有效的代码示例

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45]
    }]
  },

  // Configuration options go here
  options: {}
});
</script>
</body>
</html>


var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45]
    }]
  },

  // Configuration options go here
  options: {}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>

相关问题
最新问题