在Aurelia中使用Chart.js

Question

我想在aurelia项目中使用chart.js，但我遇到了错误。如何将第三方节点包添加到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语句

<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.备用导入语法

跳过app.js中的app.js行，但在app.js或您将要使用的图表中的每个模块中尝试以下一条(每次试一条)。这些进口产品中的一种可能会起作用。

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

3.旧式前置

如果上述任何操作都不起作用，请使用aurelia.json的aurelia.json节(在dependencies部分之前)将其导入为遗留回购文件，如下所示：

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

Aurelia-图表的更新：(为以后的任何观众添加)

由于您最终使用了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项目，它需要一些额外的修改。

我使用了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';，并从chart.js视图模型生命周期方法中运行chart.js快速启动示例。

在他们提到的chart.js文档中，如果您的项目已经依赖于当前库，包括小型化版本可能会导致问题。

捆绑版本包括内置在同一个文件中的Moment.js。如果您希望使用时间轴并希望包含单个文件，则应使用此版本。如果应用程序已经包含Moment.js，请不要使用此生成。如果这样做，Moment.js将被包括两次，增加页面加载时间，并可能引入版本问题。

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