Chart.js не отображается на сайте

1

Я действительно не могу понять это.

Я использую Chart.js - и график работает нормально локально, но когда я пытаюсь показать его онлайн на моем сервере, он не работает.

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
        datasets: [{
            label: 'Udvikling i motorvejstrafikken 2010-2017',
            data: [100, 103.5, 107.2, 110.3, 115.4, 120.9, 126.3, 131.5],
            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: 4
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    min: 90
                }
            }]
        }
    }
});   
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart" width="400px" height="400px"></canvas>

Когда я проверяю консоль в chrome, я получаю эту ошибку: tester:890 Uncaught ReferenceError: Chart is not defined at tester:890

Я проверяю источники, и в нем говорится, что здесь есть ошибка:

var myChart = new Chart(ctx, {

Но что вызывает эту проблему. Работает нормально локально и на fiddle.net.

Надеюсь, кто-то сможет мне помочь. Заранее спасибо.

  • 0
    Вы определяете свой сценарий сверху или снизу (не могу сказать с помощью фрагмента). Потому что у меня когда-то была проблема с тем, что у меня были теги сценария внизу и локально, это работало, но когда я попытался выложить его в сеть, это не помогло. Когда я ставил теги сценария в начале, он работал нормально для меня. Или ваш сервер не позволяет извлекать ваши источники из Интернета? попробуйте загрузить сценарии и выложить их в сеть вместе со своим графиком. Потому что мне кажется, что ошибка относится к тому, что ваши сценарии неверны, потому что он не распознает метод Chart.
  • 0
    Кажется, вы javascript файл - где вы пишете new Chart(ctx, { находится в верхней части файла char.js
Показать ещё 4 комментария
Теги:
chart.js
charts

1 ответ

0

Немного поздно, но у меня была такая же проблема. Чтобы исправить это, вам нужно получить диаграмму, генерируемую из window.onload.

например

window.onload = function() {
  var ctx = document.getElementById('myChart').getContext('2d');
  window.myLine = new Chart(ctx, {
      type: 'line',
      data: {
          labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
          datasets: [{
              label: 'Udvikling i motorvejstrafikken 2010-2017',
              data: [100, 103.5, 107.2, 110.3, 115.4, 120.9, 126.3, 131.5],
              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: 4
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      min: 90
                  }
              }]
          }
      }
  });
};

Не знаю, почему это работает локально без этого, но нужно это изменение, чтобы отобразить на сервере.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню