Charts.js：力矩未定义（使用chart.bundle.min.js）

Question

我已成功创建图表并使用 charts.js 配置它，但现在我想让 X 轴代表时间。当我尝试使用下面的代码执行此操作时，出现以下控制台错误：Uncaught ReferenceError: moment is not defined。我正在使用 chart.bundle.min.js，因为文档指定捆绑包中包含 moment.js，因此我不需要下载 link moment.js。

这是代码，我从一个正在回答有关时间轴的问题的堆栈成员那里得到的。 JavaScript:

function newDate(days) 
{
  return moment().add(days, 'd'); //THIS IS WHERE THE PROBLEM IS ACCORDING TO CONSOLE.
};

var config = 
{
  type: 'line',
  data: 
  {
    //Calling the function here, so also shows as error in console.
    labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)], 
    datasets: 
    [{
      label: "My First dataset",
      data: [4, 3, 1, 4],
    }]
  },
  options: 
  {
    scales: 
    {
      xAxes: 
      [{
        type: 'time',
        unit: 'month',
      }],
    },
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

HTML:

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
    <link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/chart.bundle.min.js"></script>
  </head>
  <body>

    <canvas id="myChart"></canvas>
  </body>
</html>

Answer 1

我看了charts.js的文档：

When providing data for the time scale, Chart.js supports all of the formats that Moment.js accepts. See Moment.js docs for details.

因此，您应该像这样使用 Chart.js api：

var chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ type: 'time', time: { displayFormats: { quarter: 'MMM YYYY' } } }] } } })

不是moment().add()

Answer 2

在我看来，由于某种原因，Moment 在捆绑包中不可用我已经在 JSFiddle 中尝试了您的代码，但出现错误，但是在 Moment.js serpatley 中加载它效果很好。

也许使用 Chart.js 和 Moment.js 而不是捆绑，如果您担心 http 请求，您总是可以自己压缩和捆绑它们？

Charts.js：力矩未定义（使用chart.bundle.min.js）

Charts.js: Moment is not defined (using chart.bundle.min.js)

javascript

momentjs

chart.js

chart.js2