HighChart世界地图未在Angular 7中呈现

Question

我希望实施HighChart世界地图，例如：https://www.highcharts.com/maps/demo/data-class-ranges

app.component.ts

进口

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import DataModule from 'highcharts/modules/data';
import MapModule from 'highcharts/modules/map';
import ExportingModule from 'highcharts/modules/exporting';

DataModule(Highcharts);
MapModule(Highcharts);
ExportingModule(Highcharts);

建设者

constructor() {

    Highcharts.data({
      googleSpreadsheetKey: '1WBx3mRqiomXk_ks1a5sEAtJGvYukguhAkcCuRDrY1L0',

      // Custom handler when the spreadsheet is parsed
      parsed: (columns) => {

        // Read the columns into the data array
        var data = [];
        Highcharts.each(columns[0], function (code, i) {
          data.push({
            code: code.toUpperCase(),
            value: parseFloat(columns[2][i]),
            name: columns[1][i]
          });
        });
        Highcharts.mapChart(this.createMapOptions(data));
        return true
      },
    });
}

createMapOptions方法：

  createMapOptions(mapData): Highcharts.Options {
    return {
      chart: {
        map: 'custom/world',
        borderWidth: 1,
        renderTo: 'container-map', // added div id 
      },
      colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
        'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],

      title: {
        text: 'Population density by country (/km²)'
      },

      mapNavigation: {
        enabled: true
      },

      colorAxis: {
        dataClasses: [{
          to: 3
        }, {
          from: 3,
          to: 10
        }, {
          from: 10,
          to: 30
        }, {
          from: 30,
          to: 100
        }, {
          from: 100,
          to: 300
        }, {
          from: 300,
          to: 1000
        }, {
          from: 1000
        }]
      },

      legend: {
        title: {
          text: 'Individuals per km²',
          style: {
            color: ( // theme
              Highcharts.defaultOptions &&
              Highcharts.defaultOptions.legend &&
              Highcharts.defaultOptions.legend.title &&
              Highcharts.defaultOptions.legend.title.style &&
              Highcharts.defaultOptions.legend.title.style.color
            ) || 'black'
          }
        },
        align: 'left',
        verticalAlign: 'bottom',
        floating: true,
        layout: 'vertical',
        backgroundColor: ( // theme
          Highcharts.defaultOptions &&
          Highcharts.defaultOptions.legend &&
          Highcharts.defaultOptions.legend.backgroundColor
        ) || 'rgba(255, 255, 255, 0.85)',
        symbolRadius: 0,
        symbolHeight: 14
      },

      series: [{
        data: mapData,[![enter image description here][1]][1]
        joinBy: ['iso-a3', 'code'],
        animation: true,
        name: 'Population density',
        states: {
          hover: {
            color: '#a4edba'
          }
        },
        tooltip: {
          valueSuffix: '/km²'
        },
        shadow: false,
        type: "area",
      }]

    }
  }

app.component.html是具有div标签和ID容器映射的简单HTML。我已经添加了此ID createMapOptions

<div id="container-map"></div>

请参阅所附图像以查看我面临的问题。

期待您的建议。

提前感谢。

Answer 1

例如，您还需要从@highcharts/map-collection包中加载适当的地图：https://www.npmjs.com/package/@highcharts/map-collection#install-from-npm

您的情况：'@highcharts/map-collection/custom/world.js'

---

文档：https://github.com/highcharts/highcharts-angular#to-load-a-map-for-highmaps