如何在Angular2中使用chart.js？

Question

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

如果在angular2中使用这里的示例足以理解，但对于简单的安装，情况并非如此。

我已经使用以下方式安装了chart.js：

npm install chart.js --save

接下来，我正在尝试使用以下方式导入它：

import Chart from 'chart.js';

出现了一个问题 - TS2307: 无法找到模块 'chart.js'。看起来很简单，但是安装后模块甚至没有被识别。

我猜名字中有点可能不太好，但是有没有办法通过它（也许使用Gruntfile.js）？

P.S 我看到了使用ng2-charts的示例，并且考虑使用它，但是据我所知，它仍然需要chart.js +我不知道它是否允许创建混合图表（还没有看到任何示例）

- Olegs Jasjko

---

你是否执行了 npm install --save @types/chart.js 命令？ - Aluan Haddad

不，我按照问题中所写的（或此处http://www.chartjs.org/docs/#getting-started-installation）完全操作了。 - Olegs Jasjko

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 {}

- Aluan Haddad

---

现在我遇到了这个美丽的错误：（SystemJS）XHR错误（404未找到）加载http://localhost:3000/chart.js... 嗯... - Olegs Jasjko

我是否还需要更新软件包并添加类似于'chart.js': { defaultExtension: 'js' }这样的内容？ - Olegs Jasjko

还是不行，因为现在它试图获取所有内容。例如 GET http://localhost:3000/node_modules/chart.js/src/core/core.helpers 404 (Not Found)。是 src/chart.js，还是可能必须是 dist/Chart.js？ - Olegs Jasjko

只需要按照你说的使用它或设置默认扩展名即可。如果你正在使用 SystemJS Builder 进行 Rollup 优化，你需要使用该包。 - Aluan Haddad

只使用了dist/Chart.js...包的更改完全没有帮助。感谢您的努力和惊叹...我简直不敢相信没有人会遇到这种问题（考虑到几乎没有关于这个术语的信息）。 - Olegs Jasjko

Answer 2

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

1. Installation :

   npm install angular2-chartjs
   

2. Add ChartModule to your module :

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

3. 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
   };
   

4. HTML

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

链接: https://github.com/emn178/angular2-chartjs "文档"

祝您编码愉快。希望这有所帮助！

- Sayan

---

你如何像官方文档所说的那样执行.update()？请参考：http://www.chartjs.org/docs/latest/developers/updates.html - Wanjia

Answer 3

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

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

否则，您可以使用以下语法导入库： import * as Chart from 'chart.js' 话虽如此，我建议使用像您建议的那样的库，因为您将能够访问组件、指令和发出的事件，这些在您的组件中更容易使用。

希望这有所帮助！

- Alexander Staroselsky

---

嗯，使用ng2-charts确实更简单，不会让自己头疼，但是免费的库支持混合图表吗？（到目前为止，我只发现高级图表支持，但那不是免费的） - Olegs Jasjko

目前 ng2-charts 支持的图表类型有线性图、柱状图、雷达图、饼图、极地区域图和环形图。尽管如此，您仍可以尝试扩展 ng2-charts 的源代码。混合图表将使用相同的输入数据。 - Alexander Staroselsky

是的，我知道。我的意思是，它允许将它们组合在一起吗？比如说折线图+柱状图？之所以我决定使用chart.js就是因为它可以实现这些东西。 - Olegs Jasjko

这将把它作为全局加载。这是不必要的。由于您正在使用模块和chart.js表现良好，因此您不必编写不良代码。 - Aluan Haddad

Answer 4

将您的导入语法更改为以下内容：

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

确保你已经完成了

npm install chart.js --save

如果你已经做过了，在你的node modules中应该有nodemodules/chart.js

- Bhimbim

Answer 5

简单的解决方法是将以下内容添加到index.html中:

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

我实际上使用的是基于chart.js的PrimeNG图表组件，但也遇到了一些问题。这是最快的启动方式。确保您引用了“bundle”包。

- weePee

---

不要这样做。它不具备可移植性，而且会污染全局对象。如果您正在使用模块加载器/打包工具，则在不需要使用全局变量的情况下，请勿使用它们，这就是模块的目的。 - Aluan Haddad