7

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/

敬具

グレン

4

3 に答える 3

12

あなたがこの質問をしてからしばらく経ちました。あなたが答えを見つけたことを願っています。そうでない場合は、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-20T21:56:02.477 に答える
10

次の行を配置する必要があります。

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-16T07:19:40.417 に答える
1

の新しいバージョンによるとchartjs、バージョン2.8.0.

公式文書

これは実用的なコード例です

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

于 2019-11-10T23:18:59.137 に答える