Аурелия - необработанный отказ - Chart.js и Moment.js

У меня проблемы с аурелией, chart.js и moment.js.

На самом деле я использую moment.js и chart.js отдельно в других классах, и это работает найти. Тем не менее, если я пытаюсь использовать функцию временной шкалы chart.js для рисования графика с измерением времени по шкале х, я получаю эту ошибку:

[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

Я добавил библиотеки в файл 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;
  }

}

Заранее спасибо за вашу поддержку.

Источник

2 ответа

Изменить определение момента в aurelia.json к следующему:

{
  "name": "moment",
  "path": "../node_modules/moment",
  "main": "moment"
},
Источник

Moment.js чтобы быть установлен в качестве глобальной переменной, так что Chart.jsШкала времени может работать.

дела

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

должен это исправить.

Источник
Другие вопросы по тегам