AmCharts - Как разобраться в исходном коде?

Question

Меня зовут Минь Вуонг Нгуен, который практикует дублирование интерактивной карты AmChart. Ошибка, с которой я сталкиваюсь, связана с кодом HTML, который они предоставляют в приведенной выше ссылке.

После того, как я скопировал эту ссылку в мой JavaScript, я посмотрел на их JavaScript исходный код , например

<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldHigh.js" type="text/javascript"></script>

Тем не менее, когда я подхожу к "ammap. js" и "worldHigh. js" строки кода очень сложны, потому что:

1. Команда типа: (function) () {} мне неизвестна, так как вы не можете использовать скобки до объявления функции , Кроме того, некоторые строки кода, такие как window.AmCharts? D = window.AmCharts: ( очень сложный.
2. Порядок с самого исходного сайта повсюду. Я делаю не знаю, как организовать это построчно, как обычно JavaScript.

(function(){
    var d;
    window.AmCharts?d=window.AmCharts:(
        d={},window.AmCharts=d,
        d.themes={},
        d.maps={},
        d.inheriting={},d.charts=[],d.onReadyArray=[],d.useUTC=!1,d.updateRate=60,d.uid=0,
        d.lang={},d.translations={},d.mapTranslations={},d.windows={},d.initHandlers=[],d.amString="am",d.pmString="pm");d.Class=function(a){var b=function(){arguments[0]!==d.inheriting&&(this.events={},this.construct.apply(this,arguments))};a.inherits?(b.prototype=new a.inherits(d.inheriting),b.base=a.inherits.prototype,delete a.inherits):(b.prototype.createEvents=function(){for(var a=0;a<arguments.length;a++)this.events[arguments[a]]=[]},b.prototype.listenTo=function(a,b,c){this.removeListener(a,b,c);

Пожалуйста, предоставьте мне соответствующие подходы по этому вопросу. Я хотел бы поблагодарить вас заранее.

Answer 1

Чтобы ответить на ваш первый вопрос, (function () {- анонимная функция. Однако это не является частью вашей проблемы. Это не js файлы, которые вы собираетесь изменить. Это просто файлы, которые необходимо быть привязанным к вашей странице, чтобы сделать всю диаграмму по существу функциональной.

ammap. js содержит основные c функциональные возможности карты и мира. js содержит очень подробную карту HighRes всего мира (поэтому будьте осторожны с этим, он очень тяжелый).

Код, который вы хотите изменить, будет выглядеть примерно так:

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

    </style>

    <!-- Resources -->
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/maps.js"></script>
    <script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
    <script src="https://www.amcharts.com/lib/4/geodata/usaLow.js"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

    <!-- Chart code -->
    <script>
    am4core.ready(function() {

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

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

    // Set map definition
    chart.geodata = am4geodata_worldLow;

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

    // Series for World map
    var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
    worldSeries.exclude = ["AQ"];
    worldSeries.useGeodata = true;

    var polygonTemplate = worldSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.fill = chart.colors.getIndex(0);
    polygonTemplate.nonScalingStroke = true;

    // Hover state
    var hs = polygonTemplate.states.create("hover");
    hs.properties.fill = am4core.color("#367B25");

    // Series for United States map
    var usaSeries = chart.series.push(new am4maps.MapPolygonSeries());
    usaSeries.geodata = am4geodata_usaLow;

    var usPolygonTemplate = usaSeries.mapPolygons.template;
    usPolygonTemplate.tooltipText = "{name}";
    usPolygonTemplate.fill = chart.colors.getIndex(1);
    usPolygonTemplate.nonScalingStroke = true;

    // Hover state
    var hs = usPolygonTemplate .states.create("hover");
    hs.properties.fill = am4core.color("#367B25");

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

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

Этот код был заимствован прямо из Демонстрационный сайт amcharts на https://www.amcharts.com/demos/multi-series-map/

Это многосерийная карта. Я не уверен, какую вы используете, но вам нужно перейти к демонстрационной версии этой карты, а затем скопируйте демонстрационный код снизу. НЕ БЕСПОКОЙИТЕСЬ О ФАЙЛАХ JS. Просто свяжите их с вашей страницей, а затем скопируйте демонстрационный код. Карта должна работать из коробки.