Question

我正在尝试在Angular2上使用'mapbubble'系列和Highcharts地图。到目前为止，地图工作正常，但无法显示气泡：因此根本没有错误，只是气泡没有出现。这就是我使用它的方式：

在我的视图组件中，我声明了一个chartOptions变量，该变量将由<chart>标记使用：

@Component({
    selector: 'map-chart-component',
    template: `<chart type="Map" *ngIf="chartOptions" [options]="chartOptions"></chart>`,
    styles: [``]
})

export class MapChartComponent implements OnInit {
    ...
    ngOnInit(){
        this.chartOptions = {
            chart: { type: 'map' },
            plotOptions: { map: { allAreas: true } },
            mapNavigation: {
                enabled: true,
                buttonOptions: { verticalAlign: 'bottom' },
            },
            series: [{
                name: 'Countries',
                color: '#E0E0E0',
                enableMouseTracking: false,
                mapData: HighmapsLibrary.customworld,
            }, {
                type: 'mapbubble',
                name: 'Population 2016',
                joinBy: ['iso-a3', 'code3'],
                data: [
                    { code3: "AFG", z: 35530 },
                    { code3: "AGO", z: 29784 },
                    { code3: "ALB", z: 2879 },
                ],
                minSize: 20,
                maxSize: '100%',
            }]
        };

    }

在app-modules.ts上：

export function highchartsFactory() {
    const hc = require('highcharts');
    const hcmap = require('highcharts/modules/map');
    const hcmore = require('highcharts/highcharts-more');
    hcmap(hc);
    hcmore(hc);
    return hc;
}

//and inside providers
@NgModule({
    ...
    providers:[
        {
            provide: HighchartsStatic,
            useFactory: highchartsFactory
        }
    ],
    ...
})

我希望这个问题足够清晰！一直在寻找并试图弄清楚几个小时但没有成功......但我希望这很简单，我很想念!!

Answer 1

这里的问题是你的mapbubble系列不知道要使用哪个mapData。

您的两个系列都使用相同的地图布局，因此可以在chart.map属性中定义，而不是在“国家/地区”系列中定义mapData：

{
  chart: {
    map: Highcharts.maps['custom/world'],
  },
  series: [{
    name: 'Countries',
    color: 'red',
    //mapData: Highcharts.maps['custom/world'] <- MOVED TO chart.map
  }, {
    type: 'mapbubble',
    name: 'Population 2016',
    joinBy: ['name', 'code3'],
    data: [{
        code3: "Nigeria",
        z: 35
      },
      {
        code3: "Poland",
        z: 29
      },
      {
        code3: "Russia",
        z: 28
      },
    ],
    minSize: 20,
    maxSize: '10%',
  }]
}

另一种做同样事情的方法是添加这一行：

 mapData: Highcharts.maps['custom/world']

在 mapbubble 系列选项中。

现场演示： http://jsfiddle.net/BlackLabel/xapn1srf/

API参考： https://api.highcharts.com/highmaps/chart.map

Answer 2

谢谢大家的努力！ @Kamil的建议在非Angular环境下运行良好，但仍然没有在Angular2中显示气泡。

对于任何有同样问题的人，事实证明我必须做$.extend( cartS, cart );才能正常工作。我还在弄清楚为什么，但它现在解决了我的问题。

谢谢！

Angular2和Highcharts地图 - 地图气泡未显示

2 个答案: