图表.js:未定义时刻(使用 chart.bundle.min.js)

我已经成功地创建了一个图表并使用图表.js对其进行了配置，但现在我想让 X 轴表示时间。当我尝试使用以下代码执行此操作时，出现以下控制台错误：未捕获的引用错误：未定义时刻。我正在使用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>

在我看来，

由于某种原因，Moment在捆绑包中不可用，我已经在JSFiddle中尝试了您的代码，并且存在错误，但是在Moment中加载.js 塞尔帕特利它工作得很好。

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

我查看了图表的文档.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()

相关内容

最新更新

热门标签：