amcharts如何在地图上放置实心量规

问题描述

对于尝试将具有动态饼图（https://www.amcharts.com/demos/map-dynamic-pie-charts/）的Map演示转换为具有相同的Map，但要用实体规（https://www.amcharts.com/demos/solid-gauge/）代替饼图，我有些犹豫。

以下是我试图用来将饼图模板隐蔽到雷达图的草稿代码，但出现错误：

TypeError：无法读取未定义的属性“ xAxes”

以及

错误：属性d：预期数字“ MNaN，NaN L-9.333…”。

我过去使用过其他工作示例，并且能够结合使用两个示例来获得所需的设计，但是经过多次尝试以了解我在这里做错了什么或缺少了什么之后，我真的很努力。谁能指出我正确的方向？

<!-- Styles -->
<style>
  #chartdiv {
    width: 100%;
    height: 500px;
  }
</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/continentsLow.js"></script>
<!-- Chart code -->
<script>
  am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var mapChart = am4core.create("chartdiv",am4maps.MapChart);
    mapChart.geodata = am4geodata_continentsLow;
    mapChart.projection = new am4maps.projections.Miller;
    mapChart.seriesContainer.draggable = true;
    mapChart.seriesContainer.resizable = true;
    mapChart.minZoomLevel = 1;
    mapChart.maxZoomLevel = 2000;

    // countries
    var wholeWorld = mapChart.series.push(new am4maps.MappolygonSeries());
    wholeWorld.exclude = ['AQ'];
    wholeWorld.useGeodata = true;
    wholeWorld.mappolygons.template.fill = am4core.color("#47c78a");
    wholeWorld.mappolygons.template.stroke = am4core.color("#cccccc");


    // Create an image series that will hold pie charts
    var pieSeries = mapChart.series.push(new am4maps.MapImageSeries());
    var pieTemplate = pieSeries.mapImages.template;
    pieTemplate.propertyFields.latitude = "latitude";
    pieTemplate.propertyFields.longitude = "longitude";

    var pieChartTemplate = pieTemplate.createChild(am4charts.RadarChart);
    pieChartTemplate.adapter.add("data",function(data,target) {
      if (target.dataItem) {
        return target.dataItem.dataContext.pieData;
      } else {
        return [];
      }
    });
    // Make chart not full circle
    pieChartTemplate.startAngle = -90;
    pieChartTemplate.endAngle = 180;
    pieChartTemplate.innerRadius = am4core.percent(20);

    // Set number format
    pieChartTemplate.numberFormatter.numberFormat = "#.#'%'";
    pieChartTemplate.propertyFields.width = "width";
    pieChartTemplate.propertyFields.height = "height";
    pieChartTemplate.horizontalCenter = "middle";
    pieChartTemplate.verticalCenter = "middle";

    var pieTitle = pieChartTemplate.titles.create();
    pieTitle.text = "{title}";


    // Create axes
    var categoryAxis = pieChartTemplate.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.datafields.category = "category";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.grid.template.strokeOpacity = 0;
    categoryAxis.renderer.labels.template.horizontalCenter = "right";
    categoryAxis.renderer.labels.template.fontWeight = 500;
    categoryAxis.renderer.labels.template.adapter.add("fill",function(fill,target) {
      return (target.dataItem.index >= 0) ? pieChartTemplate.colors.getIndex(target.dataItem.index) : fill;
    });
    categoryAxis.renderer.minGriddistance = 10;

    var valueAxis = pieChartTemplate.xAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.grid.template.strokeOpacity = 0;
    valueAxis.min = 0;
    valueAxis.max = 100;
    valueAxis.strictMinMax = true;

    // Create series
    var series1 = pieChartTemplate.series.push(new am4charts.RadarColumnSeries());
    series1.datafields.valueX = "full";
    series1.datafields.categoryY = "category";
    series1.clustered = false;
    series1.columns.template.fill = new am4core.InterfaceColorSet().getFor("alternativeBackground");
    series1.columns.template.fillOpacity = 0.08;
    series1.columns.template.cornerRadiusTopLeft = 20;
    series1.columns.template.strokeWidth = 0;
    series1.columns.template.radarColumn.cornerRadius = 20;

    var series2 = pieChartTemplate.series.push(new am4charts.RadarColumnSeries());
    series2.datafields.valueX = "value";
    series2.datafields.categoryY = "category";
    series2.clustered = false;
    series2.columns.template.strokeWidth = 0;
    series2.columns.template.tooltipText = "{category}: [bold]{value}[/]";
    series2.columns.template.radarColumn.cornerRadius = 20;

    series2.columns.template.adapter.add("fill",target) {
      return pieChartTemplate.colors.getIndex(target.dataItem.index);
    });

    pieSeries.data = [{
      "title": "north America","latitude": 39.563353,"longitude": -99.316406,"width": 100,"height": 100,"pieData": [{
        "category": "Research","value": 80,"full": 100
      },{
        "category": "Marketing","value": 35,{
        "category": "distribution","value": 92,{
        "category": "Human Resources","value": 68,"full": 100
      }]
    },{
      "title": "Europe","latitude": 50.896104,"longitude": 19.160156,"width": 50,"height": 50,{
      "title": "Asia","latitude": 47.212106,"longitude": 103.183594,"width": 80,"height": 80,{
      "title": "Africa","latitude": 11.081385,"longitude": 21.621094,"full": 100
      }]
    }];

    // Add cursor
    pieChartTemplate.cursor = new am4charts.RadarCursor();

  }); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

解决方法

这是amCharts 4.10.1发行版中修复的错误-一旦向他们突出显示，他们很快就会解决。