在Aurelia中使用Chart.js

Question

我想在aurelia項目中使用chart.js，但是我遇到了錯誤。 如何將第三方節點包添加到aurelia應用程序？

我正在使用aurelia-cli，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語句

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

---

這是解決方案

你可以在這里查看一個工作示例。 最初，我認為你必須使用aurelia-chart模塊，但是，它很難使用，因此，我建議你只使用Chart.JS包。 以下是將chart.js模塊合並到Aurelia應用程序中的方法：

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.要求問題

首先，不要在app.html項目中使用<require from="Chart"></require> 。 這是您的錯誤消息的來源，因為它正在嘗試加載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.遺產前置

如果以上都aurelia.json使用aurelia.json的prepend部分（在dependencies部分之前）將其作為舊的repo導入，如下所示：

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

Aurelia-Chart的更新:(為以后的觀眾添加）

既然你最終使用了aurelia-chart（通過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但是有一個未解決的問題 ，即它還沒有足夠的智能來添加對包依賴的引用。

為了使事情有效，我將以下內容添加到我的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'; 在我的視圖模型中，從attached viewmodel生命周期方法運行chart.js快速啟動示例。

在chart.js文檔中，他們提到包括縮小版本可能會導致問題，如果您的項目已經依賴於時刻庫。

捆綁版本包含內置於同一文件中的Moment.js。 如果您希望使用時間軸並希望包含單個文件，則應使用此版本。 如果您的應用程序已包含Moment.js，請不要使用此版本。 如果這樣做，Moment.js將被包含兩次，增加頁面加載時間並可能引入版本問題。

如果您處於該位置，此解決方案可能會有所幫助。