Typescript Aurelia-未处理的拒绝-Chart.js和Moment.js

我对aurelia、chart.js和moment.js有问题

事实上，我在其他类中分别使用了momente.js和chart.js，它可以正常工作。尽管如此，如果我尝试使用chart.js时间刻度功能在x刻度上绘制具有时间维度的绘图，我会遇到以下错误：

[Warning] Unhandled rejection Error: Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com (vendor-bundle.js, line 1395)
    initialize@http://localhost:9001/scripts/vendor-bundle.js:35970:13268
    Element@http://localhost:9001/scripts/vendor-bundle.js:35968:6217
    each@http://localhost:9001/scripts/vendor-bundle.js:35968:7779
    buildScales@http://localhost:9001/scripts/vendor-bundle.js:35967:28931
    initialize@http://localhost:9001/scripts/vendor-bundle.js:35967:27712
    Controller@http://localhost:9001/scripts/vendor-bundle.js:35967:27429
    t@http://localhost:9001/scripts/vendor-bundle.js:35968:22824
    load@http://localhost:9001/scripts/app-bundle.js:1155:22
    attached@http://localhost:9001/scripts/app-bundle.js:1160:22
    attached@http://localhost:9001/scripts/vendor-bundle.js:21894:32
    attached@http://localhost:9001/scripts/vendor-bundle.js:19969:32
    attached@http://localhost:9001/scripts/vendor-bundle.js:20323:23
    attached@http://localhost:9001/scripts/vendor-bundle.js:19974:29
    attached@http://localhost:9001/scripts/vendor-bundle.js:20323:23
From previous event:
    configure@http://localhost:9001/scripts/app-bundle.js:579:29
From previous event:
    promiseReactionJob@[native code]
From previous event:
    execCb@http://localhost:9001/scripts/vendor-bundle.js:5432:38
    check@http://localhost:9001/scripts/vendor-bundle.js:4620:57
    enable@http://localhost:9001/scripts/vendor-bundle.js:4912:27
    enable@http://localhost:9001/scripts/vendor-bundle.js:5293:45
    each@http://localhost:9001/scripts/vendor-bundle.js:3798:35
    enable@http://localhost:9001/scripts/vendor-bundle.js:4849:21
    init@http://localhost:9001/scripts/vendor-bundle.js:4525:32

我将libs添加到aurelia.json文件中

{
  "name": "moment",
  "path": "../node_modules/moment/min/moment.min"
},
{
  "name": "chart.js",
  "path": "../node_modules/chart.js/dist",
  "main": "Chart.min",
  "deps": ["moment"]
},

已创建此模板组件

请注意，

${value}

实际上被一个矩字符串替换。所以这里有moment.js

<template>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">${value}</h3>
    </div>
    <div class="panel-body">

      <canvas id="mychart"/>

    </div>
  </div>

</template>

${value}

并编写了这个typescript类：

import {autoinject} from 'aurelia-framework';
import {SalesService} from "../../service/SalesService";
import {EventAggregator} from "aurelia-event-aggregator";
import {Subscription} from "aurelia-event-aggregator";
import {FilterService} from "../../service/FilterService";
import {SalesPeriodSum} from "../../domain/SalesPeriodSum";
import * as moment from 'moment';
import Moment = moment.Moment;
import * as Chart from 'chart.js';

@autoinject
export class SalesInPeriod {

  public value: Moment;
  private _salesService: SalesService;
  private _eventAggregator: EventAggregator;
  private _subscription: Subscription;
  private _filterService: FilterService;
  private _items: Array<SalesPeriodSum>;

  constructor(salesService: SalesService, eventAggregator: EventAggregator, filterService: FilterService) {
    this._salesService = salesService;
    this._eventAggregator = eventAggregator;
    this._filterService = filterService;
  }

  private load() {
    this._salesService.getSalesInPeriod(this._filterService.request).then(result => {
      this._items = result;
    });

    this.value = moment();

    let config = {
      type: 'line',
      data: {
        datasets: [{
          label: "Dataset with string point data",
          data: [{
            x: moment().add(0, 'days'),
            y: 100
          }, {
            x: moment().add(1, 'days'),
            y: 120
          }, {
            x: moment().add(2, 'days'),
            y: 90
          }, {
            x: moment().add(3, 'days'),
            y: 105
          }],
          fill: false
        }]
      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: "Chart.js Time Point Data"
        },
        scales: {
          xAxes: [{
            type: "time",
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Date'
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'value'
            }
          }]
        }
      }
    };

    let ctx = document.getElementById("mychart");
    new Chart(ctx, config);
  }

  attached() {
    this._subscription = this._eventAggregator.subscribe('filter_changed', response => this.load());
    this.load();
  }

  detached() {
    this._subscription.dispose();
  }

  get items(): Array <SalesPeriodSum> {
    return this._items;
  }

}

从'aurelia framework'导入{autoinject}；
从“../../service/SalesService”导入{SalesService}”；
从“aurelia事件聚合器”导入{EventAggregator}；
从“aurelia事件聚合器”导入{Subscription}；
从“./../service/FilterService”导入{FilterService}”；
从“./../domain/saleriodsum”导入{saleriodsum}”；
从“时刻”导入*作为时刻；
导入力矩=力矩。力矩；
从“Chart.js”导入*作为图表；
@自动注入
导出类SalesInPeriod{
公共价值：时刻；
私人销售服务：销售服务；
私有事件聚合器：事件聚合器；
私人认购：认购；
私人过滤服务：过滤服务；
私有_项：数组；
构造函数（salesService:salesService、eventAggregator:eventAggregator、filterService:filterService）{
这个。_salesService=salesService；
这。_eventAggregator=eventAggregator；
这是._filterService=filterService；
}
私有负载（）{
this.\u salesService.getSalesInPeriod（this.\u filterService.request）。然后（result=>{
此项。_项=结果；
});
this.value=力矩（）；
让配置={
键入：“行”，
数据：{
数据集：[{
标签：“具有字符串点数据的数据集”，
数据：[{
x:moment（）.添加（0，'天'），
y:100
}, {
x:moment（）.添加（1，'天'），
y:120
}, {
x:moment（）.添加（2，'天'），
y:90
}, {
x:moment（）.添加（3，'天'），
y:105
}],
填充：假
}]
},
选项：{
回答：是的，
标题：{
显示：对，
文本：“Chart.js时间点数据”
},
比例：{
xAxes：[{
键入：“时间”，
显示：对，
scaleLabel：{
显示：对，
标签字符串：“日期”
}
}],
雅克斯：[{
显示：对，
scaleLabel：{
显示：对，
标签字符串：“值”
}
}]
}
}
};
设ctx=document.getElementById（“mychart”）；
新图表（ctx，配置）；
}
附（{
this.\u subscription=this.\u eventAggregator.subscripte（'filter\u changed'，response=>this.load（））；
这个.load（）；
}
分离的（）{
此._subscription.dispose（）；
}
获取项（）：数组{
归还此物品；
}
}

---

提前感谢您的支持

Moment.js

设置为全局变量，以便

Chart.js

的时间刻度可以工作

做

---

应该会修复它。

将

aurelia.json

中的力矩定义更改为以下内容：

{
  "name": "moment",
  "path": "../node_modules/moment",
  "main": "moment"
},

---

谢谢你的回答。我通过加载chart.bundle.min.js文件找到了解决方案。此脚本包括moment.js。但事实上，这不是双方想要的。因此，我意识到将自己的变量添加到窗口的唯一方法是使用以下语句：

import*as moment from'moment'；（窗户）。力矩=力矩。然后我可以在控制台上看到时刻，但从上面得到相同的错误。@Fritz，这可能是因为它在寻找时刻，而不是窗口上的时刻：这为您解决了吗？
{
  "name": "moment",
  "path": "../node_modules/moment",
  "main": "moment"
},