错误说图表未定义答案

【问题标题】：Error says Chart is not defined错误说图表未定义
【发布时间】：2016-04-29 20:21:33
【问题描述】：

我尝试将 ChartJS 添加到 Angular2，但它一直说 Chart 未定义。我安装了 ChartJS 类型并引用了它。我还将 chartjs 脚本添加到 index.html 文件中。我做错了什么？

/// <reference path="../../website/typings/main/ambient/chart/index.d.ts" />
import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
    selector: '[chart]'
})
export class ChartDirective {
    constructor(el: ElementRef, renderer: Renderer) {
        //el.nativeElement.style.backgroundColor = 'yellow';
        var data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
                {
                    label: "My Second dataset",
                    fillColor: "rgba(151,187,205,0.2)",
                    strokeColor: "rgba(151,187,205,1)",
                    pointColor: "rgba(151,187,205,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(151,187,205,1)",
                    data: [28, 48, 40, 19, 86, 27, 90]
                }
            ]
        };
        var ctx: any = el.nativeElement.getContext("2d");
        var lineChart = new Chart(ctx);
        ////var lineChartOptions = areaChartOptions;
        ////lineChartOptions.datasetFill = false;
        lineChart.Line(data);
    }
}

更新：

这是我的 index.html 文件：

<html>
<head>
    <title>DBL Information Systems</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <script src="node_modules/chartjs/chart.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/main')
                .then(null, console.error.bind(console));
    </script>
</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

这是我的打字文件夹结构：

【问题讨论】：

如何将 chartjs 添加到 index.html 文件中？

标签： typescript angular chart.js

【解决方案1】：

您需要从import 子句中导入Chart 类：

import {Chart} from 'chartjs';

something 取决于您配置 SystemJS 的方式。

您包含的类型仅用于您的 IDE 中的编译和自动完成。

编辑

chartjs库对应的SystemJS配置为：

System.config({
  map: {
    chartjs: 'node_modules/chartjs/chart.js'
  },
  (...)
});

看到这个 plunkr：https://plnkr.co/edit/IA2LojT2CXV9qcCDOdBl?p=preview。

编辑2

关于打字，我会这样安装对应的：

从 npm 安装库类型

npm install --save-dev retyped-chartjs-tsd-ambient

使用类型导入类型

typings install --save --ambient file:node_modules/retyped-chartjs-tsd-ambient/chart.d.ts

由于 d.ts 文件没有声明模块名称，因此仍然存在错误。要解决此问题，您可以使用 declare module 子句包装此文件的声明：
```
declare module 'chartjs' {
  interface ChartDataSet {
    label: string;
  (...)
}
```

【讨论】：

感谢您的快速回复。我将 index.html 文件添加到我的问题中。我的图表库不包含 .ts 文件。我还能导入 Chart 类吗？
谢谢！我认为您需要在 SystemJS 配置中配置 charjs.js。有关更多详细信息，请参阅此问题：stackoverflow.com/questions/36693803/…。
我添加了 map: {chart: 'node_modules/chartjs/chart.js'} 它说找不到图表。这与您链接的 stackoverflow 问题中的问题相同，但我无法解决它....
哪个 URL 加载失败了？
只是：从'chart'导入图表；正如您的链接中建议的那样