ReferenceError: Диаграмма не определена - chartjs

Есть ли ошибка с Chart.js? Каждый раз, когда я добавляю какой-либо из диаграмм на Chart.js на свой сайт, я получаю сообщение об ошибке, но когда я использовал график в качестве автономной программы, он работает без ошибок. Я использую 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: я просто отсоединил script от элемента canvas (сделал другой файл для script для выполнения его функции).

Обновлен 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);

Ответ 1

здесь приведен пример jsfiddle вашего кода:
new Chart(rice).Line(riceData);
http://jsfiddle.net/mahmalsami/jqcthmyo/
Таким образом, проблема окончательно исходит из вашего внешнего включения Chart.min.js

Вы можете найти 404 на вашем js get. Убедитесь, что вы подключаетесь к правильной папке js. (попробуйте получить доступ к вашему localhost/Chart.min.js, чтобы узнать, можете ли вы получить доступ к своему файлу)

Ответ 2

Я также получал ту же ошибку. Чтобы исправить это, я переместил скрипт диаграммы в отдельный файл 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>

Страница выглядит так:

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>

Ответ 3

1) Я попробовал Chart.js загрузить с Chartjs.org. Но, он не работает.

2) Попытайтесь это сделать.

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

Работает хорошо.

Ответ 4

Я получил ту же ошибку. Чтобы решить эту проблему, вы должны правильно включить библиотеку chart.js следующим образом:

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