Question

令人惊讶的是，尽管chart.js非常受欢迎，但我没有找到关于它在angular2中安装的文档，也没有找到它在那里使用的简单示例。

如果在angular2 example here中的使用情况足以理解，我无法对简单安装说同样的话。

我已经使用

安装了chart.js

npm install chart.js --save

接下来，我尝试使用

导入它

import Chart from 'chart.js';

立即出现问题 - TS2307: Cannot find module 'chart.js' 它应该很简单，但安装后甚至无法识别模块。

我想，有名字是一件坏事，但有没有办法通过它（可能使用Gruntfile.js）？

PS我看到了ng2-charts的示例，我考虑使用它，但据我所知，它仍然需要chart.js +我不知道它是否允许创建混合图表（didn＆＃39 ; t看到了任何一个例子）

Answer 1

如果您使用的是TypeScript，则只需安装@types包

即可

npm install --save chart.js @types/chart.js

现在TypeScript知道如何使用该包进行类型检查，以下内容将起作用。

import Chart = require('chart.js'); // For CommonJS users.

import Chart from 'chart.js'; // for SystemJS and/or Babel users.

const myChart = new Chart($('#chart1'), {});

注意，我在上面的示例中显示了两个导入。删除运行时中不起作用的那个，但只保留其中一个。

对于SystemJS + npm，将以下内容添加到systemjs.config.js的map部分

"chart.js": "npm:chart.js/dist/chart.js"

可选地，当且仅当您使用ng2-charts包装器时，运行

npm install --save ng2-charts

然后将其添加到您的主要NgModule装饰工厂的imports数组

import { ChartsModule } from 'ng2-charts/ng2-charts';

@NgModule({
  imports: [
    ChartsModule
  ]
}) export class AppModule {}

Answer 2

在angular2中使用非常简单......

安装：
```
npm install angular2-chartjs
```

将ChartModule添加到您的模块：

import { ChartModule } from 'angular2-chartjs';
@NgModule({
  imports: [ ChartModule ]
})

export class AppModule {
}

的JavaScript

type = 'line';
data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    data: [65, 59, 80, 81, 56, 55, 40]
  }]
};
options = {
  responsive: true,
  maintainAspectRatio: false
};

HTML

<chart [type]="type" [data]="data" [options]="options"></chart>

链接：https://github.com/emn178/angular2-chartjs＆＃34;文档＆＃34;

享受快乐的编码。希望这有帮助！

Answer 3

对于Angular CLI项目，您希望在chart.js数组属性的.angular-cli.json中添加scripts依赖项，如下所示：

"scripts": [
    "../node_modules/chart.js/dist/Chart.bundle.min.js"
]

否则，您可以使用以下语法导入库：

import * as Chart from 'chart.js'

话虽如此，我建议使用您建议使用的库，因为您可以访问组件，指令和发出的事件，这些事件将更容易在组件中使用

希望这有帮助！

Answer 4

将导入合成语更改为：

import Chart from "chart.js/dist/Chart.bundle.min.js";

确保你已经

npm install chart.js --save

如果你已经在你的节点模块中应该有nodemodules / chart.js

Answer 5

简单的解决方法是将其添加到index.html：

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

我实际上使用PrimeNG，它有一个基于chart.js的图表组件，也有问题。这是启动和运行的最快方式。请务必参考“捆绑”包。

如何在Angular2中使用chart.js？

5 个答案: