Question

我正在发现Highcharts / Highmaps，现在，我想使用 Angular 6 在我的机器上重现一些演示示例，但是我无法使其正常工作。

官方JS示例在这里：https://www.highcharts.com/maps/demo/map-drilldown （您可以通过单击“在CodePen中编辑”来查看代码）

我试图修改这样的示例：

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教程。

至少有人可以帮助我在Angular应用中运行此官方示例吗？

更新：感谢@daniel_s，我现在使用的是官方包装器highcharts-angular，摆脱了编辑器错误。我在新项目的控制台中先运行npm install highcharts-angular --save，然后运行npm install highcharts --save。

您可以在此处查看该项目：https://codesandbox.io/s/38o5n9qor1 （我在沙箱中添加了highcharts-angle，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

您可以检查并帮助我更正我的代码吗？

Answer 1

这是行不通的，因为您根本没有在项目中导入任何地图。不幸的是，没有包含所有地图的npm软件包，但是您可以手动创建带有所需地图的文件，并将文件直接导入到项目中。以下是如何将地图添加到项目中的示例：https://codesandbox.io/s/vm58jk5005

最诚挚的问候！

Answer 2

我知道这可能不是确切的答案，但是如果有人希望从Highcharts official documentation绘制美国地图示例，您可能会遇到诸如地图不正确的问题呈现或大量控制台错误。

在这里，我想简要地写一些步骤来使该示例正常工作，以防万一您遇到相同的情况。

步骤：
1）从US-ALL下载US-CAPITALS和here。（如果需要，可以使用CDN）。

2）完成后，将JSON文件放入项目数据文件夹（或您喜欢的其他任何位置）。

3）在渲染地图之前，请尝试确保您可以使用httpClient获取JSON数据：

  this._httpClient.get('data/us-all.json').first().subscribe((map: any) => {
      this._httpClient.get('data/us-capitals.json').first().subscribe((json: any) => {
...

4）现在使用以下代码渲染地图：

HTML

  <div [chart]="mapChart"
       style="min-width: 60vw; max-width: 100vw; height: 70vh; margin: 0 auto"></div>

Typescript / JS

...  

 public ngOnInit(): void {
    MapModule(Highcharts)

    this._httpClient.get('data/us-all.json').first().subscribe((map: any) => {
      this._httpClient.get('data/us-capitals.json').first().subscribe((json: any) => {
        const data: any[] = []
        forEach(USCapitals.default, (elm) => {
          elm.z = elm.population
          data.push(elm)
        })

        this.mapChart = new MapChart({
          title: {
            text: 'Highmaps lat/lon demo'
          },

          tooltip: {
            pointFormat: '{point.capital}, {point.parentState}<br>' +
              'Lat: {point.lat}<br>' +
              'Lon: {point.lon}<br>' +
              'Population: {point.population}'
          },
          xAxis: {
            crosshair: {
              zIndex: 5,
              dashStyle: 'dot',
              snap: false,
              color: 'gray'
            }
          },
          yAxis: {
            crosshair: {
              zIndex: 5,
              dashStyle: 'dot',
              snap: false,
              color: 'gray'
            }
          },
          mapNavigation: {
          enabled: true,
            buttonOptions: {
              alignTo: 'spacingBox'
            }
          },
          legend: {
            enabled: true
          },
          colorAxis: {
            min: 0
          },
          series: [
          {
             name: 'Basemap',
             mapData: USMap.default,
             borderColor: '#606060',
             nullColor: 'rgba(200, 200, 200, 0.2)',
             showInLegend: false
          } as Highcharts.SeriesMapOptions,
          {
             type: 'mapbubble',
             dataLabels: {
               enabled: true,
               format: '{point.capital}'
             },
             name: 'Enrolment by States',
             data: data,
             maxSize: '12%',
             color: Highcharts.getOptions().colors[ 0 ],
             point: {
               events: {
                  click: event => {
                    alert('you have clicked on map bubble.')
                  }
               }
             }
          },
          {
            name: 'Separators',
            type: 'mapline',
            data: Highcharts.geojson(USMap.default, 'mapline'),
            color: '#101010',
            enableMouseTracking: false,
            showInLegend: false
          }
         ]
        })
      })
    })
  }

上面的内容足以查看带有状态的基本美国地图。

更新

您也可以使用直接JSON导入，就像写成here一样。

带有Angular的Highcharts / Highmaps-无法运行演示

2 个答案:

更新