Question

我遇到aurelia，chart.js和moment.js的问题。

实际上我在其他类中分别使用了moment.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>

并编写了这个打字稿类：

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;
  }

}

提前感谢您的支持。

Answer 1

将

Moment.js设置为全局变量，以便Chart.js的时间范围可以正常工作。

否则

import { Moment } from 'moment';
window.Moment = Moment;

应该修复它。

Answer 2

将aurelia.json中的时刻定义更改为以下内容：

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

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

2 个答案: