Chartjs+moment()未在Django上显示

2024-09-30 01:22:36 发布

您现在位置:Python中文网/ 问答频道 /正文

我已经尝试过这段代码一个在线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与其他值一起使用,并且它工作正常,但当我尝试此方法“仅显示日期”时,它不工作) 知道为什么吗


Tags: dividconfigdatatimevartypescript
1条回答
网友
1楼 · 发布于 2024-09-30 01:22:36

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

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

&13; 第13部分,;
<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>
和#13;
和#13;

相关问题 更多 >

    热门问题