Карта Angular2 и Highcharts - пузырьки на карте не отображаются

Question

Я пытаюсь использовать серию 'mapbubble' с картой Highcharts на Angular2.Пока что карта работает нормально, но пузырьки не отображаются, поэтому нет никакой ошибки, только пузырьки не отображаются.Вот как я его использую:

Внутри компонента моего представления я объявил переменную 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%',
            }]
        };

    }

В приложении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

Спасибо всем за ваши усилия! Предложение @ Kamil отлично сработало в неангулярной среде, но внутри Angular2 пузыри все еще не появлялись.

Для тех, у кого была такая же проблема, оказалось, что я должен был сделать chart.redraw(), чтобы он работал правильно. Я все еще выясняю, почему, но это решило мою проблему.

Спасибо!

Answer 2

Проблема в том, что ваш ряд 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