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

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);

设置最后一步＆＃34;极地＆＃34;在图表对象中。

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

使用Angular2中的Highcharts绘制雷达图

1 个答案: