Блог

Главная - Вопросы по программированию - Окончательная настройка Angular 2 highcharts

Окончательная настройка Angular 2 highcharts

#angular #npm #highcharts #rxjs

#angular #npm #максимумы #rxjs

Вопрос:

После настройки проекта с последней / окончательной версией Angular 2 я не могу реализовать простой компонент highchart в зависимости от встроенных в него руководств — я создал каталог компонентов linechart, в котором я хотел бы настроить свою диаграмму, а затем добавить ее на сайты проекта с помощьютег <line-chart></line-chart> в html.

моя линейная диаграмма.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 Модуль не найден: Ошибка: не удается разрешить ‘rxjs / observable /из’ in ‘/node_modules/@angular/router / src’ разрешить ‘rxjs / observable / из’ in ‘node_modules / @angular /router / src’ Анализируемый запрос — это модуль, использующий описаниефайл: /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 (не совсем уверен, какой из них является устаревшим?). Кто-нибудь сталкивался с этим? У меня заканчиваются идеи.

Комментарии:

1. Вместо этого вы можете попробовать ng2-charts. Об этой ошибке: «Неперехваченная ошибка: не удается найти модуль «rxjs / observable/из» main.bundle.js: 22045″. Вы импортировали ‘rxjs’?

2. rxjs импортируется и является частью импорта app.module.ts

3. Попробуйте импортировать его следующим образом: импортируйте ‘rxjs / Rx’; Вы не должны видеть эту ошибку, если вы импортируете ее правильно

4. Спасибо! есть ли у вас опыт настройки charts.js в angular2? я получаю следующую ошибку: ..caused by: ng2-charts configuration issue: Embedding Chart.js lib is mandatory — я знаю, что должен добавить следующую строку в свой проект <script src="node_modules/chart.js/src/chart.js"></script> , но какой файл? index.html , component.template.html , или app.component.html ?

5. неважно. решил это, добавив import 'chart.js/src/chart.js'; в мои modules.ts

Ответ №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