use Chart.js в Aurelia

Question

Я хотел бы использовать chart.js в проекте aurelia, но я получаю ошибки. Как добавить пакеты сторонних узлов в приложение aurelia?

Я использую Aurelia-кли, BTW

Вот что я сделал

npm install --save chart.js 

В aurelia.json я добавил следующее

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

В app.html я затем добавить строку

<require from="chart.js"></require> 

Но, я получаю ошибку:

vendor-bundle.js:1399 Unhandled rejection Error: Load timeout for modules: template-registry-entry!chart.html,text!chart.html 

Я пробовал различные вещи, как инъекции диаграммы в app.html

// DIDN'T WORK :-(
// app.js 
import {inject} from 'aurelia-framework'; 
import {Chart} from 'chart.js'; 

export class App { 

    static inject() { return [Chart]}; 

    constructor() { 
    this.message = 'Hello World!'; 
    } 
} 

И, потом, в app.html, я добавил следующие требуют заявление

<require from="Chart"></require> 

---

ВОТ РЕШЕНИЕ

Вы можете проверить рабочий пример here. Первоначально я думал, что вам нужно использовать модуль aurelia-chart, однако его очень сложно использовать, и поэтому я бы рекомендовал вам вместо этого использовать пакет Chart.JS. Вот как включить модуль chart.js в приложение Аурелия:

npm install --save chart.js 

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

"prepend": [ 
    ..., 
    "node_modules/chart.js/dist/Chart.min.js" 
], 

app.js В файле (или любой другой модель- просмотр файлов), добавьте строку

import {Chart} from 'node_modules/chart.js/dist/Chart.js'; 

для, например, если вы хотите, чтобы отобразить диаграмму на домашней странице:

// app.js 
import {Chart} from 'node_modules/chart.js/dist/Chart.js'; 

export class App { 
    ... 
} 

И все!

Answer 1

1. Проблема с требует

Прежде всего, не используйте <require from="Chart"></require> в вашем app.html проекте. Это источник вашего сообщения об ошибке, поскольку он пытается загрузить модуль Aurelia, а chart.js не является модулем Aurelia (view/viewmodel) в исходном коде.

2.Альтернативный синтаксис импорта

Пропустить inject линии в app.js, но попробуйте один из следующих (попробуйте их один на один раз) в любом app.js или в каждом модуле вы будете использовать таблицу. Один из этих видов импорта, скорее всего, будет работать.

import { Chart } from 'chart.js'; 
import * from 'chart.js'; 
import 'chart.js'; 

3. Наследие предварять

Если ни один из перечисленных выше работ, не импортировать его в качестве унаследованного репо с использованием prepend раздел aurelia.json (перед секцией dependencies), как это:

"prepend": [ 
    // probably a couple other things already listed here... 
    "node_modules/chart.js/dist/Chart.min.js" 
], 

Обновление для Aurelia-Chart: (добавлено для любого последующего просмотра)

Так как вы в конечном итоге происходит с Aurelia-графике (по grofit), вот код зависимость для aurelia.json:

"dependencies": [ 
    ..., 
    { 
    "name": "chart.js", 
    "path": "../node_modules/chart.js/dist", 
    "main": "Chart.min.js" 
    }, 
    { 
    "name": "aurelia-chart", 
    "path": "../node_modules/aurelia-chart/dist/amd", 
    "main": "index", 
    "deps": ["chart.js"] 
    } 
] 

Answer 2

Я только что получил эту работу с проектом Aurelia Cli и требует некоторых дополнительных модификаций.

Я использовал au install chart.js, но есть open issue, который утверждает, что он недостаточно интеллектуальный, чтобы добавить ссылки на зависимости пакетов.

Чтобы сделать работу, я добавил следующее моих зависимостей aurelia.json:

"moment", 
"chartjs-color", 
"chartjs-color-string", 
{ 
    "name": "chart.js", 
    "main": "src/chart.js", 
    "path": "../node_modules/chart.js", 
    "deps": ["chartjs-color", "moment"] 
}, 
{ 
    "name": "color-convert", 
    "path": "../node_modules/color-convert", 
    "main": "index" 
}, 
{ 
    "name": "color-name", 
    "path": "../node_modules/color-name", 
    "main": "index" 
} 

Я был тогда в состоянии import { Chart } from 'chart.js'; в моей модели представления и запустить chart.js быстрый пример запуска из жизненного цикла attached ViewModel метод.

В файле chart.js, которые упоминаются в нем, включая сокращенную версию, могут возникнуть проблемы, если ваш проект уже зависит от библиотеки момента.

The bundled version includes Moment.js built into the same file. This version should be used if you wish to use time axes and want a single file to include. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.

Это решение может помочь, если вы находитесь в этом положении.