javascript - 如何在 Angular2 中使用 chart.js？

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)？

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

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