在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将被包含两次，增加页面加载时间并可能引入版本问题。

如果您处于该位置，此解决方案可能会有所帮助。