Question

我正在尝试将条形图（带有其自己的数据）实现为世界地图上的图像标记。尝试实现类似下图的内容：

我创建了一个Miller投影，然后处理了现有的“带有动态饼图的地图”（https://www.amcharts.com/demos/map-dynamic-pie-charts/）示例

我用XY图表替换了饼图MapImageSeries模板，添加了Category（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等）下添加代码。

谢谢。

编辑：我用此代码创建了一个JsFiddle。请打开调试器/控制台以查看显示的错误。

url：http://jsfiddle.net/2gebvsu1/

Amcharts：将Barchart用作地图图像标记

0 个答案: