web-dev-qa-db-ja.com

ReferenceError：チャートが定義されていません-chartjs

Chart.jsにバグはありますか？ Chart.jsのグラフをWebサイトに追加するたびにエラーが発生しますが、グラフをスタンドアロンプ​​ログラムとして使用すると、エラーなしでスムーズに実行されます。 HTML5を使用しています。

   <html>
   <head>
      <meta charset="utf-8" />
      <title>Rice Consumption</title>
      <script src='Chart.min.js'></script>
    </head>
    <body>

      <canvas id="rice" width="600" height="400"></canvas>

      <script>
        var riceData = {
        labels : ["January","February","March","April","May","June"],
        datasets :
         [
            {
              fillColor : "rgba(172,194,132,0.4)",
              strokeColor : "#ACC26D",
              pointColor : "#fff",
              pointStrokeColor : "#9DB86D",
              data : [203000,15600,99000,25100,30500,24700]
            }
         ]
        }

          var rice = document.getElementById('rice').getContext('2d');
               new Chart(rice).Line(riceData);
    </script>
    </body>
    </html>

[〜＃〜] solved [〜＃〜]：スクリプトをキャンバス要素から切り離しました（スクリプトがその機能を実行するための別のファイルを作成しました）。

更新されたHTML：

      <html>
      <head>
      <meta charset="utf-8" />
      <title>Rice Consumption</title>
      <script src='Chart.min.js'></script>
      </head>
      <body>
      <canvas id="rice" width="600" height="400"></canvas>
      <script src='Chart.min.js'></script>
      <script src='rice.js'></script>
      </body>
      </html>

新しいJavaScriptファイル：

var riceData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "rgba(172,194,132,0.4)",
            strokeColor : "#ACC26D",
            pointColor : "#fff",
            pointStrokeColor : "#9DB86D",
            data : [203000,15600,99000,25100,30500,24700]
        }
    ]
}

var rice = document.getElementById('rice').getContext('2d');
new Chart(rice).Line(riceData);
javascripthtml5html5-canvaschart.js
15
iWantToLearn

コードのjsfiddleが機能しています：
new Chart(rice).Line(riceData);
http://jsfiddle.net/mahmalsami/jqcthmyo/
したがって、問題は外部のChart.min.jsのインクルードから決定的に発生しています。

js getに404が表示される場合があります。正しいjsフォルダーにリンクしていることを確認してください。 （localhost/Chart.min.jsにアクセスして、ファイルにアクセスできるかどうかを確認してください）

7
SamiX

私も同じエラーを受け取っていました。これを修正するために、チャートスクリプトを個別のgraph.jsファイルに移動しました。

それでも、同じエラーが発生していました。これは、次に示すように、タグの終わりの前に次の順序でタグを配置したときに修正されます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript" src="jscript/graph.js"></script>
</body>

ページは次のようになります。 enter image description here

var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!DOCTYPE html>

<canvas id="myChart"></canvas>
6
Rahul Varadkar

1）Chart.jsからダウンロードしたChartjs.orgを試しました。しかし、それは機能していません。

2）これを試してください。

<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js">
</script>

うまくいっている。

2
김강욱

同じエラーが発生しました。この問題を解決するには、chart.jsライブラリを次のように正しく含める必要があります。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

0
Sidi M. Aourid

Ruby on Rails 5、私と同じように、Rails $ === 5で断続的にこれが表示される場合、問題はTurbolinksを使用することでした。 ！

0
legoblocks