集成ng2 highcharts的问题

我正在尝试在我的应用程序中使用ng2 highcharts。但是在使用语句导入必要的类之后

import {Ng2Highcharts, Ng2Highmaps, Ng2Highstocks} from 'ng2-highcharts/ng2-highcharts';**

如果我试图在我的组件中的指令数组中指定这些类（

指令：[Ng2Highcharts]

），我的控制台中会出现以下错误

[TypeError: require is not a function][1]

我的System.config如下所示

---

有人能告诉我这里缺少什么吗？

您需要在SystemJS配置中定义“ng2 highchart”：

<script>
  System.config({
    map: {
     'ng2-highchart': 'node_modules/ng2-highchart'
    },
    (...)
  });
</script>

System.config({
地图：{
“ng2 highchart”：“节点模块/ng2 highchart”
},
(...)
});

有关更多详细信息，请参见此问题：

---

从软件包中删除格式：“注册”。这将帮助它检测正确的格式。也可以按如下方式添加格式：

System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          },
           "node_modules/ng2-highcharts": {
                format: 'cjs',
                defaultExtension: 'js'
              }
        },
        map: {
            "ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
        },
        paths: {
            "ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
          }
      });

---

这是我的烛台样品。。。看看这是否有帮助

import { Component } from '@angular/core';
import {JSONP_PROVIDERS, Jsonp} from '@angular/http';
import { CHART_DIRECTIVES } from 'angular2-highcharts';


@Component({
    selector: 'high-chart',
    directives: [CHART_DIRECTIVES],
    providers: [JSONP_PROVIDERS],
    template: `
    <h2> This is HighChart CandleStick component </h2>

        <chart type="StockChart" [options]="options3"></chart>
    `
})

export class HighChartsComponent {

    options3: Object;

    constructor(jsonp : Jsonp) {

        jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => {
            this.options3 = {
                title : { text : 'CandleSticks' },
                rangeSelector : {
                    selected : 1
                },
                series : [{
                    type : 'candlestick',
                    name : 'CandleSticks',
                    data : res.json(),
                    dataGrouping : {
                    units : [
                        [
                            'week', // unit name
                            [1] // allowed multiples
                        ], [
                            'month',
                            [1, 2, 3, 4, 6]
                        ]
                    ]
                },
                    tooltip: {
                        valueDecimals: 2
                    }
                }]
            };

        });

}

从'@angular/core'导入{Component}；
从“@angular/http”导入{JSONP_提供者，JSONP}”；
从“angular2 highcharts”导入{CHART_指令}；
@组成部分({
选择器：'高位图表'，
指令：[图表_指令]，
提供者：[JSONP_提供者]，
模板：`
这是HighChart烛台组件
`
})
导出类HighCharts组件{
选项3：目标；
构造函数（jsonp:jsonp）{
jsonp.request（'https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-json&callback=JSONP_callback'）。订阅（res=>{
此选项3={
标题：{文本：'烛台'}，
范围选择器：{
选定：1
},
系列：[{
键入：“烛台”，
名称：'烛台'，
数据：res.json（），
数据分组：{
单位：[
[
'周'，//单位名称
[1] //允许的倍数
], [
“月”，
[1, 2, 3, 4, 6]
]
]
},
工具提示：{
数值小数：2
}
}]
};
});
}

我已经在我的SystemJS配置中定义了它，但问题仍然存在。如果你点击我问题中的System.config链接，你可以看到我的SystemJS配置。我想你不需要在

包

块中的“ng2 highchart”条目。

映射

中的一个就足够了……恐怕不行。离开它会给你带来麻烦错误"SyntaxError:意外标记看起来，

。/../node\u modules/ng2 highcharts/

不是正确的路径。您可以检查一下吗？您不能在包中定义ng2 highcharts元素，因为它们不是符合systemjs的，而是commonjs。也许您可以将格式改为

commonjs

。但我认为这方面存在问题您在

路径

块中的路径…如果我错了，请纠正我。但这不是node_模块中ng2 highcharts文件夹的路径吗？如果是，根据我的项目结构，我相信

。/../node_模块/ng2 highcharts/

就是路径。