Highmaps图表在Angular 5中为空 [英] Highmaps chart is empty in Angular 5

问题描述

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

I have a component where I have to show high maps. No errors but the maps is always empty

我的图表选项对象:

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对象时，我总是将系列设为null.

When I console the created MapChart object i am getting the series as null always.

我缺少什么?为什么地图系列始终为空?

What am i missing and why the maps series is always null?

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

I am using angular-highcharts component as explained here : https://github.com/cebor/angular-highcharts

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

reproduced in stackblitz: https://stackblitz.com/edit/angular-highcharts-stock-nbvnuw?file=app%2Fapp.module.ts

推荐答案

可能有用.

这是角度高图的解决方案:

Here is the solution for angular-highcharts:

1)从收藏集中下载地图: https://code.highcharts.com/mapdata/

1) Download the map from collection: https://code.highcharts.com/mapdata/

2)创建一个等于该文件内容的变量并将其导出:

2) Create a variable that equals to the content of this file and export it:

代替

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

使用

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

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

2) Import this map to your component (for world-map.ts):

import worldMap from './world-map';

3)使用

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

当然，不要忘记在模块中添加几行:

And, of course, don't forget to add a couple of lines to your module:

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/

Solution was found here: https://forum.highcharts.com/highmaps-usage-f14/highmaps-bubble-chart-is-empty-t40432/

这篇关于Highmaps图表在Angular 5中为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！