Angular2でハイチャートを使用した描画レーダーチャート

Question

angular2-highchartsを使用しており、正常に設定しました。

私は次のコード

constructor(private emotionsService: EmotionsService) { 
     this.options = { 
      title: { text : 'dynamic data example'}, 
      series: [{ 
       data: [29.9, 71.5, 106.4, 129.2], 
      }] 
     }; 
    } 
    options: HighchartsOptions; 

を使用する場合、それは完璧に動作します。 しかし、私はレーダーチャート/ Spider Webを描きたいと思います。オプションの中に次の行を追加しました。

xAxis: { 
       categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
        'Information Technology', 'Administration'], 
      }, 

      yAxis: { 
       gridLineInterpolation: 'polygon', 
      }, 

それは以下のように互換性のない財産文句：

chart: { polar: boolean; }; xAxis: { categories: string[]; }; yAxis: { gridLineInterpolation: s...' is not assignable to type 'HighchartsOptions'. 
[0] Types of property 'yAxis' are incompatible. 

それがこのNPMモジュールとスパイダーチャートを描画することができます。

Answer 1

スパイダーはhighcharts-more.jsファイルを使用する必要があります。あなたは、アプリケーションにインポートすることにより、systemjs.config.js

var map = { 
    'app':      'app', // 'dist', 
    'rxjs':      'https://npmcdn.com/rxjs@5.0.0-beta.6', 
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest, 
    'angular2-highcharts':  'https://cdn.rawgit.com/gevgeny/angular2-highcharts/0.1.0/dist', 
    'highcharts/highstock.src': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js', 
    'highcharts/highcharts-more': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highcharts-more.src.js', 
    }; 

内のファイルへの参照を追加して、参照を設定する必要があります。

import { bootstrap }     from '@angular/platform-browser-dynamic'; 
import { Component }     from '@angular/core'; 
import { CHART_DIRECTIVES, Highcharts } from 'angular2-highcharts'; 
import HighchartsMore      from 'highcharts/highcharts-more'; 

HighchartsMore(Highcharts); 

最後のステップは、チャートオブジェクトに「極座標」と設定されています。

constructor() { 
    this.options = { 
     chart: { 
     type: 'column', 
     polar: true 
     }, 
     series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }; 
} 

固定デモ：

• http://plnkr.co/edit/HCbX8kxvhCDxww3HWiG5?p=preview