Question

在使用最新/最终的Angular 2版本设置项目之后，我无法根据教程实现简单的高图组件 - 我已经创建了一个线图组件目录，我想在其中设置在我的图表上，然后使用html中的<line-chart></line-chart>标记将其添加到项目网站中。

我的 linechart.component.ts

import {Component} from "@angular/core";
import { CHART_DIRECTIVES } from 'angular2-highcharts';

@Component({
  selector:"app-linechart",
  templateUrl:"./linechart.component.html",
  directives: [CHART_DIRECTIVES],
  styles: [`
      chart {
        display: block;
      }
    `]

})
export class LinechartComponent{
  constructor() {
    this.options = {
      title : { text : 'example chart' },
      series: [{
        type: 'column',
        data: [29.9, 71.5, 106.4, 129.2],
      }]
    };
  }
  options: Object;
}

app.component.html

   ...
     <div class="row">
      <div class="col-xs-6">
        <app-linechart></app-linechart>
      </div>
    </div>
...

控制台错误:(路径缩短）

未捕获错误：找不到模块“rxjs / observable / of”main.bundle.js：22045

./ ~/@angular/router/src/router.js       找不到模块：错误：无法解析'/ node_modules / @ angular / router / src'中的'rxjs / observable / of'       在'node_modules / @ angular / router / src'中解析'rxjs / observable / of'         解析请求是一个模块         使用描述文件：/node_modules/@angular/router/package.json（相对路径：./ src）           字段“浏览器”不包含有效的别名配置         使用描述文件后：//node_modules/@angular/router/package.json（相对路径：./ src）           解析为模块                   ... / node_modules / node_modules不存在或者不是目录不存在或者不是目录                  ... / node_modules / node_modules不存在或者不是目录/ node_modules / @ angular / router / node_modules不存在或者不是目录                  ... / node_modules / node_modules不存在或者不是目录/ node_modules / @ angular / node_modules不存在或者不是目录             ... / node_modules / node_modules不存在或不是目录             在...中寻找模块。

app.module.ts

...
import { OverviewComponent } from './sites/overview/overview.component';
import {ChartModule}            from 'angular2-highcharts';
import { Ng2Highcharts } from 'ng2-highcharts';

 ... imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    ChartModule,
    Ng2Highcharts
  ],

我按照ng2-highcharts`上的所有步骤尝试了angular2-highcharts（不太确定哪一个被弃用了？）。有经验的人吗？我的想法已经不多了。

Answer 1

对于Ionic 2

添加

import 'chart.js/src/chart.js';

到src / app / app.module.ts文件而不是

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

谢谢@edamerau

Angular 2 highcharts最终设置

1 个答案: