Amcharts: использование Barchart в качестве маркеров карты - PullRequest
Новая
       28

Amcharts: использование Barchart в качестве маркеров карты

0 голосов
/ 07 марта 2019

Я пытаюсь реализовать гистограммы (со своими собственными данными) в качестве маркеров изображения на карте мира. Попытка реализовать что-то вроде следующего изображения:

Bar chart on world map

Я создал проекцию Миллера и работал над уже существующим примером «Карты с динамическими круговыми диаграммами» (https://www.amcharts.com/demos/map-dynamic-pie-charts/)

Я заменил шаблон круговой диаграммы MapImageSeries на XY-диаграмму, добавил оси категорий (xAxes) и Value (yAxes), но не могу создать гистограммы поверх карты. Когда я беру код гистограммы и внедряю его в пустой контейнер вместо карты, он работает!

Я думаю, что мне не хватает обязательной привязки данных (поскольку я получаю сообщение «не удается найти ошибку xAxes» на консоли). Я правильно понимаю карту, но не гистограммы на ней.

Технический стек: AmCharts 4 + Angular 7

Код указан ниже: 

ngOnInit() { 
    // Create map instance
    let chart = am4core.create("chartdiv", am4maps.MapChart);

    // Set map definition
    chart.geodata = am4geodata_worldLow;

    // Set projection
    chart.projection = new am4maps.projections.Miller();

    // Create map polygon series
    let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.exclude = ["AQ"];
    polygonSeries.useGeodata = true;

    //imageseries
    let imageSeries = chart.series.push(new am4maps.MapImageSeries());
    let imageSeriesTemplate = imageSeries.mapImages.template;
    imageSeriesTemplate.propertyFields.latitude = "latitude";
    imageSeriesTemplate.propertyFields.longitude = "longitude";

    let barChart = imageSeriesTemplate.createChild(am4charts.XYChart);
    let categoryAxis = barChart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "category";
    categoryAxis.title.text = "category";
    let valueAxis = barChart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.title.text = "Value";

    barChart.adapter.add("data", function(data, target) {
      if(target.dataItem) {
        return target.dataItem.dataContext.pieData;
      }
    });

    barChart.propertyFields.width = "width";
    barChart.propertyFields.height = "width";
    barChart.horizontalCenter = "middle";
    barChart.verticalCenter = "middle";

    let barTitle = barChart.titles.create();
    barTitle.text = "{title}";

    let barSeriesTemplate = barChart.series.push(new am4charts.ColumnSeries());
    barSeriesTemplate.dataFields.valueY = "value"
    barSeriesTemplate.dataFields.categoryX = "category";

    imageSeries.data = [{
      "title": "North America",
      "latitude": 39.563353,
      "longitude": -99.316406,
      "width": 100,
      "height": 100,
      "pieData": [{
        "category": "Category #1",
        "value": 1200
      }, {
        "category": "Category #2",
        "value": 500
      }, {
        "category": "Category #3",
        "value": 765
      }, {
        "category": "Category #4",
        "value": 260
      }]
    }, {
      "title": "Europe",
      "latitude": 50.896104,
      "longitude": 19.160156,
      "width": 50,
      "height": 50,
      "pieData": [{
        "category": "Category #1",
        "value": 200
      }, {
        "category": "Category #2",
        "value": 600
      }, {
        "category": "Category #3",
        "value": 350
      }]
    }, {
      "title": "Asia",
      "latitude": 47.212106,
      "longitude": 103.183594,
      "width": 80,
      "height": 80,
      "pieData": [{
        "category": "Category #1",
        "value": 352
      }, {
        "category": "Category #2",
        "value": 266
      }, {
        "category": "Category #3",
        "value": 512
      }, {
        "category": "Category #4",
        "value": 199
      }]
    }, {
      "title": "Africa",
      "latitude": 11.081385,
      "longitude": 21.621094,
      "width": 50,
      "height": 50,
      "pieData": [{
        "category": "Category #1",
        "value": 200
      }, {
        "category": "Category #2",
        "value": 300
      }, {
        "category": "Category #3",
        "value": 599
      }, {
        "category": "Category #4",
        "value": 512
      }]
    }];
  }

PS: я также пытался добавить код под разными хуками жизненного цикла, такими как ngAfterViewInit, ngAfterContentInit и т. Д.

Заранее спасибо.

EDIT: Я создал JsFiddle с этим кодом. Пожалуйста, откройте Debugger / Console для просмотра показанных ошибок.

URL: http://jsfiddle.net/2gebvsu1/

...