高图在5号角是空的

Question

我有一个组件，我必须显示高地图。没有错误，但地图始终为空

我的图表选项对象：

let chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }];
this.chartConfigObject = new MapChart(<any>{
            chart: {
                borderWidth: 1,
                map: 'custom/world'
            },

            title: {
                text: 'World population 2013 by country'
            },

            subtitle: {
                text: 'Demo of Highcharts map with bubbles'
            },

            legend: {
                enabled: false
            },

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

            series: [{
                name: 'Countries',
                color: '#E0E0E0',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                name: 'Population 2016',
                joinBy: ['iso-a3', 'code3'],
                data: chartData,
                map: mapData,
                minSize: 4,
                maxSize: '12%',
                tooltip: {
                    pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
                }
            }]
        });

当我对创建的MapChart对象进行控制台操作时，我得到的序列总是为空。

我遗漏了什么，为什么映射序列总是空的？

我使用的是angular-highcharts组件，如下所示：https://github.com/cebor/angular-highcharts

在stackblitz中转载：https://stackblitz.com/edit/angular-highcharts-stock-nbvnuw?file=app%2Fapp.module.ts

Answer 1

您没有向图表提供地图数据，因此它不知道要显示哪个地图。尝试在Series下显示地图数据，如mapData: Highcharts.maps['custom/world']。

如果无法访问Highcharts引用中的地图，请尝试将所有地图(JS文件)从HighMaps库导入到项目中，并在typescript组件文件中引用它们，如下所示：

const Highcharts = {maps: {}};
require('../../../assets/maps')(Highcharts); //your custom project path

并使用mapData: Highcharts['maps']['custom/world']或任何您想要使用的地图，如'countries/us/us-all'

下面是使用angular-highcharts绘制地图和地图上的点的工作地图代码：

getMap(data) {        
        return new MapChart({
            chart: {    
                    events: {
                    load: function (point) {
                        //do something here on page load
                    }
                },            
                spacingBottom: 20
                backgroundColor: '#FFF',
                style: {fontFamily: 'inherit'}
            },
            title: {
                text: ''
            },
            mapNavigation: {
                enabled: true
            },
            tooltip: {
                headerFormat: '',
                formatter: function () {
                    var toolTipTxt = '<b>' + this.point.options.name + '</b>';                    
                    return toolTipTxt;
                }
            },
            plotOptions: {
                series: {
                    color: '#00A778',
                    marker: {
                        radius: 6,
                        symbol: 'circle',
                        lineColor: '#00A778',
                        lineWidth: 1,
                        states: {
                            select: {
                                fillColor: '#00A778',
                                lineWidth: 1,
                                lineColor: '#00A778'
                            }
                        }
                    },
                    point: {
                        events: {
                            click: function () {
                                this.select(null, true);
                            }
                        }
                    }                 
                }
            },
            series: [
                {
                    //mapData: Highcharts['maps']['custom/world']
                    mapData: Highcharts.maps['custom/world'], 
                    name: 'Basemap',
                    borderColor: '#A0A0A0',
                    nullColor: 'rgba(200, 200, 200, 0.3)',
                    showInLegend: false,
                    data: []
                },
                {
                    // Specify points using lat/lon
                    type: 'mappoint',
                    name: 'MySites',
                    data: data
                }                
            ]
        });
    }

此外，您还需要proj4js库来在地图上绘制点，如果这也是您的要求的话。

希望这能有所帮助！

Answer 2

也许，它可能是有用的。

以下是angular-highcharts的解决方案：

1)从集合下载地图：https://code.highcharts.com/mapdata/

2)创建一个与该文件内容相等的变量，并导出：

而不是

Highcharts.maps["custom/world"] = { ... content of the file ... }

使用

const worldMap = { ... content of the file ... }
export default worldMap;

2)将此地图导入您的组件(对于world-map.ts)：

import worldMap from './world-map';

3)使用

chart: {
  ...
  map: worldMap,
  ...
},

当然，不要忘记在模块中添加几行代码：

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as highmaps from 'highcharts/modules/map.src';

@NgModule({
  ...
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [highmaps] }
  ],
  ...
})

关于模块：https://www.npmjs.com/package/angular-highcharts#highmaps

下面是一个工作示例：https://stackblitz.com/edit/angular-highcharts-stock-byjo6a

在这里可以找到解决方案：https://forum.highcharts.com/highmaps-usage-f14/highmaps-bubble-chart-is-empty-t40432/