Блог

Я немного зациклился на попытке преобразовать демонстрационную версию карты с динамическими круговыми диаграммами (https://www.amcharts.com/demos/map-dynamic-pie-charts /) иметь ту же карту, но заменить круговые диаграммы сплошными шкалами (https://www.amcharts.com/demos/solid-gauge /).

Ниже приведен черновик кода, который я пытался использовать, чтобы скрыть шаблон круговой диаграммы в диаграмме радара, но я получаю сообщение об ошибке:

Ошибка типа: не удается прочитать свойство ‘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>
  

Это была ошибка, которая была исправлена в выпуске amCharts 4.10.1 — они были очень быстро устранены, как только она была им показана.