Question

我试图将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>

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

Answer 1

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

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。

<强> EDIT2

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

从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; (...) }

错误表示图表未定义

1 个答案: