在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.require的问题

首先，不要<require from="Chart"></require>在您的 app.html 项目中使用。这是错误消息的来源，因为它正在尝试加载 Aurelia 模块，而 Chart.js 不是源代码中的 Aurelia 模块（视图/视图模型）。

2. 替代导入语法

跳过inject中的行app.js，但在您将使用 Chart 的任一模块或每个模块中尝试以下操作之一（一次尝试一个） 。其中一种进口产品可能会起作用。app.js

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

3. 遗留前置

如果上述方法均不起作用，请使用（该部分之前）prepend的部分将其导入为遗留存储库，如下所示：aurelia.jsondependencies

"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"]
  }
]