Question

我正在尝试在我的应用程序中使用ng2-highcharts。但是在使用语句

导入必要的类之后

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

如果我尝试在我的组件（directives: [Ng2Highcharts]）中的指令数组中指定这些类，我在控制台中收到以下错误。

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

我的System.config如下所示 System.config

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

Answer 1

您需要在SystemJS配置中定义'ng2-highchart'：

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

有关详细信息，请参阅此问题：

How to use highcharts with angular 2?

Answer 2

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

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
                    }
                }]
            };

        });

}

Answer 3

删除格式：＆＃39;注册＆＃39;从你的包裹。这将有助于它检测正确的格式。或者您可以按如下方式添加格式：

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"
          }
      });

集成ng2-highcharts的麻烦

3 个答案: