amcharts - 根据选择框更改地图数据答案

【问题标题】：amcharts - change map data according selectboxamcharts - 根据选择框更改地图数据
【发布时间】：2023-03-06 20:28:01
【问题描述】：

我正在使用 AMCHARTS 来显示带有图钉的地图。每个图钉都包含销售文本。

我想在我的 html 中添加 SELECTBOX，它允许用户选择 DAILY、WEEKLY、MONTHLY、YEARLY 并根据他选择的内容刷新地图数据

                <select class="" id="map_duration">
                    <option value="daily">Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                    <option value="yearly">Yearly</option>
                </select>

为此，我安排了 4 个包含引脚数据的字符串 var：

$graph3_text_countries_str_daily

$graph3_text_countries_str_weekly

$graph3_text_countries_str_monthly

$graph3_text_countries_str_yearly

请参阅下面脚本的最后一部分。在最后一行我添加了相关的字符串 var:

imageSeries.data = [<?PHP echo $graph3_text_countries_str_daily ?>];

如何根据用户选择的内容更改脚本中的字符串 vat？

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

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

    /**
     * Define SVG path for target icon
     */
    var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";

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

    // Set map definition
    chart.geodata = am4geodata_worldLow;

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

    // Create map polygon series
    var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

    // Exclude Antartica
    polygonSeries.exclude = ["AQ"];

    // Make map load polygon (like country names) data from GeoJSON
    polygonSeries.useGeodata = true;

    // Configure series
    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.strokeOpacity = 0.5;
    polygonTemplate.nonScalingStroke = true;

    // create capital markers
    var imageSeries = chart.series.push(new am4maps.MapImageSeries());

    // define template
    var imageSeriesTemplate = imageSeries.mapImages.template;
    var circle = imageSeriesTemplate.createChild(am4core.Sprite);
    circle.scale = 0.4;
    circle.fill = new am4core.InterfaceColorSet().getFor("alternativeBackground");
    circle.path = targetSVG;
    // what about scale...

    // set propertyfields
    imageSeriesTemplate.propertyFields.latitude = "latitude";
    imageSeriesTemplate.propertyFields.longitude = "longitude";

    imageSeriesTemplate.horizontalCenter = "middle";
    imageSeriesTemplate.verticalCenter = "middle";
    imageSeriesTemplate.align = "center";
    imageSeriesTemplate.valign = "middle";
    imageSeriesTemplate.width = 8;
    imageSeriesTemplate.height = 8;
    imageSeriesTemplate.nonScaling = true;
    imageSeriesTemplate.tooltipText = "{title}";
    imageSeriesTemplate.fill = am4core.color("#000");
    imageSeriesTemplate.background.fillOpacity = 0;
    imageSeriesTemplate.background.fill = am4core.color("#ffffff");
    imageSeriesTemplate.setStateOnChildren = true;
    imageSeriesTemplate.states.create("hover");

    imageSeries.data = [<?PHP echo $graph3_text_countries_str_daily ?>];



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

【问题讨论】：

标签： javascript php amcharts

【解决方案1】：

首先，您将数据初始化为错误的对象。您必须将数据推送到图表中对象并在每次选择更改时重新加载数据。然后使用类似的东西：

$('#map_duration').on('change', function() {
  if(this.value == 'daily') {
    chart.data = [<?PHP echo $graph3_text_countries_str_daily ?>];
  } else if(this.value == 'weekly') {
    chart.data = [<?PHP echo $graph3_text_countries_str_weekly ?>];
  }.....
});

【讨论】：