SystemJS 在 index.html 中导入 chart.js [英] SystemJS import chart.js in index.html

问题描述

我是 angularjs(特别是 angular js2)的新手.

I am new to angularjs (specially angular js2).

我对 SystemJS 导入/配置感到困惑.

I am confused with SystemJS importing / configurations.

我的应用程序 (angularjs2) 运行正常.我正在使用 Visual Studio 开发它.

I have my application (angularjs2) which works ok. I am developing it with Visual Studio.

我已经设置了 package.json，它在 node_modules 中加载了我需要的东西.就我而言，我想使用 chart.js

I have set up the package.json which loads in node_modules my necessary stuff. In my case I would like to use chart.js

来自 package.json 文件的片段

"dependencies": {
    "angular2": "2.0.0-beta.15",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "^0.19.26",
    "zone.js": "0.6.11",
    "bootstrap": "3.3.6",
    "jquery": "2.2.3",
    "font-awesome": "4.5.0",
    "toastr": "2.1.2",
    "chart.js": "2.0.2"    
  },

在我的 Index.html 中，我有以下内容:

In my Index.html I have the following :

<!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });

        System.import('app/main')
              .then(null, console.error.bind(console));

        $(document).ready(function () {
            window.toastr = toastr;
            setTimeout(function () {
                toastr.options = {
                    closeButton: true,
                    progressBar: true,
                    showMethod: 'slideDown',
                    timeOut: 2500
                };
                toastr.success('Welcome to the APP');

            }, 1300);
        });
    </script>

Chart JS 是如何导入的:

How Chart JS is imported:

 <!-- ChartJS-->
 <!--version1: OLD ChartJS importing WORKS ok--> 
 <!--<script src="scripts/plugins/chartJs/Chart.min.js"></script>-->

 <!--version2: This kind of importing does not work-->
 <script src="node_modules/chart.js/dist/Chart.min.js"></script>

注意:

我有一个 toastr，它也是以这种方式从 node_modules 导入的:

I have a toastr which is also imported from node_modules in this way:

   <!-- Toastr -->
    <script src="node_modules/toastr/build/toastr.min.js"></script>

但它工作正常.

node_modules 文件夹不包含在我的解决方案中

The node_modules folder is not included in my solution

我将在一个组件中使用它(稍后在一个单独的指令中 - 根据最佳方法)

I am going to use it in a component (later in a separate directive - according to best approach)

在那一行

var myNewChart = new Chart(ctx).Line(lineData, options);

它在抱怨:

ReferenceError: Chart is not defined
    at DashboardComponent.execute.DashboardComponent.createLinearChart

推荐答案

Chart.js在2.2.1和Angular 2版本发布后strong> 位于 RC4 可以通过以下方式使用 chart.js:

After Chart.js was released in version 2.2.1 and Angular 2 is at RC4 It is possible to use chart.js in following manner:

//package.json
"dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2",
    "bootstrap": "3.3.7",

    "chart.js": "2.2.1",
    "...ETC"

从 node_modules 导入:

Import from node_modules:

//Index.html
<script src="node_modules/chart.js/dist/Chart.js"></script>

实际使用:

this.chart = new Chart(ctx, { type: 'line', data: data, options: chartOptions });

有关如何使用"的更多详细信息，请参阅此帖子:chart.js - 提供的参数与调用目标 (angular2) 的任何签名都不匹配

More details about "How to use" see in this post: chart.js - Supplied parameters do not match any signature of call target (angular2)

这篇关于SystemJS 在 index.html 中导入 chart.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！