javascript - amcharts 如何在地图上放置实心仪表

问题描述

我有点坚持尝试将带有动态饼图（https://www.amcharts.com/demos/map-dynamic-pie-charts/）的地图演示转换为具有相同的地图，但将饼图替换为实心量规 ( 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", function(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,
        "full": 100
      }, {
        "category": "Distribution",
        "value": 92,
        "full": 100
      }, {
        "category": "Human Resources",
        "value": 68,
        "full": 100
      }]
    }, {
      "title": "Europe",
      "latitude": 50.896104,
      "longitude": 19.160156,
      "width": 50,
      "height": 50,
      "pieData": [{
        "category": "Research",
        "value": 80,
        "full": 100
      }, {
        "category": "Marketing",
        "value": 35,
        "full": 100
      }, {
        "category": "Distribution",
        "value": 92,
        "full": 100
      }, {
        "category": "Human Resources",
        "value": 68,
        "full": 100
      }]
    }, {
      "title": "Asia",
      "latitude": 47.212106,
      "longitude": 103.183594,
      "width": 80,
      "height": 80,
      "pieData": [{
        "category": "Research",
        "value": 80,
        "full": 100
      }, {
        "category": "Marketing",
        "value": 35,
        "full": 100
      }, {
        "category": "Distribution",
        "value": 92,
        "full": 100
      }, {
        "category": "Human Resources",
        "value": 68,
        "full": 100
      }]
    }, {
      "title": "Africa",
      "latitude": 11.081385,
      "longitude": 21.621094,
      "width": 50,
      "height": 50,
      "pieData": [{
        "category": "Research",
        "value": 80,
        "full": 100
      }, {
        "category": "Marketing",
        "value": 35,
        "full": 100
      }, {
        "category": "Distribution",
        "value": 92,
        "full": 100
      }, {
        "category": "Human Resources",
        "value": 68,
        "full": 100
      }]
    }];

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

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

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

标签： javascriptamchartsamcharts4

javascript - amcharts 如何在地图上放置实心仪表

问题描述

解决方案

推荐阅读