在Angular2中使用Highcharts繪製雷達圖表

我正在使用angular2-highcharts，並且我已成功設置它。在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模塊。

來源

2016-09-23 user3288346

Spider需要使用highcharts-more.js文件。您需要將參考由導入應用程序添加到該文件中的systemjs.config.js

var map = { 
    'app':      'app', // 'dist', 
    'rxjs':      'https://npmcdn.com/[email protected]', 
    '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);

最後一步是在圖表對象中設置「polar」。

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

來源

2016-09-23 11:57:25

我加入'要求（ 'highcharts/highcharts-more.js'）（Highcharts）;'在module.ts文件。 – user3288346

而且運作良好或者你仍然有問題？ –

它適用於此。感謝你的回答。如果你可以在你的答案中修改它，我將接受它。 – user3288346

在Angular2中使用Highcharts繪製雷達圖表

回答

相關問題