Chartjs + moment() 未在 django 上显示答案

【问题标题】：Chartjs + moment() not displaying on djangoChartjs + moment() 未在 django 上显示
【发布时间】：2021-06-19 15:50:51
【问题描述】：

我已经尝试了这个在线 js 的代码：https://jsfiddle.net/prfd1m8q/，它运行良好，但是当我像这样将它粘贴到 Django 上的 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 与其他值一起使用并且它正在工作，但是当我尝试这种方法“只是为了显示日期”它不起作用）知道为什么吗？

【问题讨论】：

先用ctrl+shift+r清空缓存，可能对你有帮助。
我试过这个方法，但没有用！还有其他提议吗？
可能是您的 chartjs 库没有正确加载。尝试在 header 处导入 chartjs 库。
@Sohaib 有没有类似 momentjs 的安装或链接？
我用没有 moment() 的 chartjs 显示了一些其他图表，所以我猜这个问题在 moment() 中

标签： javascript python django chart.js momentjs

【解决方案1】：

您可以通过额外的script 标签单独导入 Moment.js，而不是使用 Chart.js 的 bundled version，它应该可以工作。

请查看您修改后的可运行代码。

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

【讨论】：