在Angular2中使用Highcharts绘制雷达图

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;

效果很好。然而，我想画一个雷达图/蜘蛛网。我在选项中添加了以下行:

 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

Spider需要使用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设置引用。

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 =