Question

我已经成功创建了一个图表并使用charts.js对其进行了配置，但现在我想让X轴表示时间。当我尝试使用下面的代码执行此操作时，我收到以下控制台错误：未捕获的ReferenceError：未定义时刻。我正在使用chart.bundle.min.js，因为文档指定捆绑包附带了moment.js，所以我不需要下载和链接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

在我看来Moment由于某些原因在我在JSFiddle中尝试过你的代码的包中没有，并且有一个错误，但是在Moment.js serpatley中加载它很有用。

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

Answer 2

我查看了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()

Charts.js：未定义时刻（使用chart.bundle.min.js）

2 个答案: