带有角度的海图/海图-无法运行演示

我正在发现Highcharts/Highmaps,现在,我想用 角度6 ,但我做不到。

官方JS示例如下: https://www.highcharts.com/maps/demo/map-drilldown (单击“在代码笔中编辑”可以看到代码)

我试着用这样的例子:

import { Component, OnInit } from '@angular/core';
import { Highcharts, MapChart } from 'angular-highcharts';

require('highcharts/modules/map')(Highcharts);

@Component({
  selector: 'app-demo-map-drilldown',
  templateUrl: './demo-map-drilldown.component.html',
  styleUrls: ['./demo-map-drilldown.component.css']
})
export class DemoMapDrilldownComponent implements OnInit {

  private chart: MapChart;

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    let data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);
    let separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline');

    // Set drilldown pointers
    data.forEach((element, i) => {
      element.drilldown = element.properties['hc-key'];
      element.value = i; // Non-random bogus data
    });

    // Instantiate the map
    Highcharts.mapChart('container', {
      chart: {
        events: {
          drilldown: function (e) {
            if (!e.seriesOptions) {
              let chart = this;
              let mapKey = 'countries/us/' + e.point.drilldown + '-all';
              // Handle error, the timeout is cleared on success
              let fail = setTimeout(function () {
                if (!Highcharts.maps[mapKey]) {
                  chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
                  fail = setTimeout(function () {
                    chart.hideLoading();
                  }, 1000);
                }
              }, 3000);

              // Show the spinner
              chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner

              //data = Highcharts.geojson(Highcharts.maps[mapKey]);
              data = Highcharts.maps[mapKey];

              // Set a non-random bogus value
              data.forEach((element, i) => {
                element.value = i; // Non-random bogus data
              });

              // Hide loading and add series
              chart.hideLoading();
              clearTimeout(fail);
              chart.addSeriesAsDrilldown(e.point, {
                name: e.point.name,
                data: data,
                dataLabels: {
                  enabled: true,
                  format: '{point.name}'
                }
              });

            }

            this.setTitle(null, { text: e.point.name });
          },
          drillup: function () {
            this.setTitle(null, { text: '' });
          }
        }
      },

      title: {
        text: 'Highcharts Map Drilldown'
      },

      subtitle: {
        text: '',
        floating: true,
        align: 'right',
        y: 50,
        style: {
          fontSize: '16px'
        }
      },

      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },

      colorAxis: {
        min: 0,
        minColor: '#E6E7E8',
        maxColor: '#005645'
      },

      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },

      plotOptions: {
        map: {
          states: {
            hover: {
              color: '#EEDD66'
            }
          }
        }
      },

      series: [{
        data: data,
        name: 'USA',
        dataLabels: {
          enabled: true,
          format: '{point.properties.postal-code}'
        }
        }, {
          type: 'mapline',
          data: separators,
          color: 'silver',
          enableMouseTracking: false,
          animation: {
            duration: 500
          }
      }],

      drilldown: {
        activeDataLabelStyle: {
          color: '#FFFFFF',
          textDecoration: 'none',
          textOutline: '1px #000000'
        },
        drillUpButton: {
          relativeTo: 'spacingBox',
          position: {
            x: 0,
            y: 60
          }
        }
      }
    });
  }
}

但到目前为止还没有运气。我明白了 geojson is undefined 我的编辑器(Visual Studio代码)为我对Highcharts的所有调用加下划线( .geojson , .maps , .mapChart ).

我的 app.module.ts 文件如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';
import * as highstock from 'highcharts/modules/stock.src';
import * as highmaps from 'highcharts/modules/map.src';
import * as drilldown from 'highcharts/modules/drilldown.src';
import * as data from 'highcharts/modules/data.src';
import * as exportdata from 'highcharts/modules/export-data.src';
import * as offline from 'highcharts/modules/offline-exporting.src';

import { AppComponent } from './app.component';
import { DemoMapDrilldownComponent } from './demo-map-drilldown/demo-map-drilldown.component';

@NgModule({
  declarations: [
    AppComponent,
    DemoMapDrilldownComponent,
  ],
  imports: [
    BrowserModule,
    ChartModule,
  ],
  providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: () => [more, exporting, highstock, highmaps, drilldown, data, exportdata, offline]
    }, // add as factory to your providers
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

如您所见,我尝试从Highcharts中导入各种模块(基于几个教程),但没有任何改进。。。

我对海图完全迷茫了。很明显,在我的设置和/或使用这个框架的过程中出现了一些问题,但是文档根本没有帮助,我找不到任何完整的、详细的角度教程。

有人能至少帮我在一个角度应用程序中运行这个官方示例吗?

更新: 多亏了“丹尼尔”,我现在用的是官方包装纸 highcharts-angular 摆脱了编辑上的错误。 我跑了 npm install highcharts-angular --save 然后 npm install highcharts --save 在一个新项目的控制台中。

你可以在这里看到这个项目: https://codesandbox.io/s/38o5n9qor1 (我在沙盒中添加了highcharts angular、highcharts和highcharts map作为依赖项) 在控制台中,我们得到错误:

ERROR TypeError: "a is undefined"
geojson             https://38o5n9qor1.codesandbox.io/node_modules/highcharts/highmaps.js:435:407
ngAfterViewInit     https://38o5n9qor1.codesandbox.io/src/app/official-example/official-example.component.ts:18:20

你能帮我核对一下密码吗?