Блог

Главная - Вопросы по программированию - Chartjs момент() не отображается в django

Chartjs момент() не отображается в django

#javascript #python #django #chart.js #momentjs

Вопрос:

Я попробовал этот код в этом онлайн-js : https://jsfiddle.net/prfd1m8q/ и он отлично работает, но когда я вставляю его на свой index.html на Джанго, как это:

 <div class="btcprices-chart" id="btcprices">
  <canvas id="myChart3"></canvas>
  <script>
    function newDate(days) {
      return moment().add(days, 'd');
    }
    var config = {
      type: 'line',
      data: {
        labels: [newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
        datasets: [{
          label: "My First dataset",
          data: [10, 11, 12, 13, 14],
        }]
      },
      options: {
        scales: {
          xAxes: [{
            type: 'time',
            time: {
              displayFormats: {
                'millisecond': 'MMM DD',
                'second': 'MMM DD',
                'minute': 'MMM DD',
                'hour': 'MMM DD',
                'day': 'MMM DD',
                'week': 'MMM DD',
                'month': 'MMM DD',
                'quarter': 'MMM DD',
                'year': 'MMM DD',
              }
            }
          }],
        },
      }
    };

    var ctx = document.getElementById("myChart3").getContext("2d");
    new Chart(ctx, config);
  </script>
</div>

Я не получаю ничего отображаемого (обратите внимание, что я использую chartjs с другими значениями, и это работает, но когда я попробовал этот метод «просто для отображения даты», он не работает)
Есть идеи, почему ?

Комментарии:

1. сначала очистите кэш с помощью ctrl shift r, это может вам помочь.

2. я пробовал этот метод, но он не сработал ! Есть еще какие-нибудь предложения ?

3. возможно, ваша библиотека chartjs не загружена должным образом. попробуйте импортировать библиотеку chartjs в заголовке.

4. @Sohaib есть ли что-то вроде установки или привязки momentjs ?

5. я отобразил какую-то другую диаграмму с помощью chartjs без moment (), поэтому я предполагаю, что проблема в moment()

Ответ №1:

Вместо использования прилагаемой версии Chart.js, вы можете импортировать Moment.js отдельно через дополнительный script тег и это должно сработать.

Пожалуйста, взгляните на свой исправленный и выполняемый код.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

<div class="btcprices-chart" id="btcprices">
  <canvas id="myChart3"></canvas>
  <script>
    function newDate(days) {
      return moment().add(days, 'd');
    }
    var config = {
      type: 'line',
      data: {
        labels: [newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
        datasets: [{
          label: "My First dataset",
          data: [10, 11, 12, 13, 14],
        }]
      },
      options: {
        scales: {
          xAxes: [{
            type: 'time',
            time: {
              displayFormats: {
                'millisecond': 'MMM DD',
                'second': 'MMM DD',
                'minute': 'MMM DD',
                'hour': 'MMM DD',
                'day': 'MMM DD',
                'week': 'MMM DD',
                'month': 'MMM DD',
                'quarter': 'MMM DD',
                'year': 'MMM DD',
              }
            }
          }],
        },
      }
    };

    var ctx = document.getElementById("myChart3").getContext("2d");
    new Chart(ctx, config);
  </script>
</div>
Метки: