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

Question

我正在使用AMCHARTS以显示带有图钉的地图。每个图钉均包含销售文字。

我想在我的html中添加SELECTBOX，这将使用户可以选择每日，每周，每月，每年，并根据他选择的内容刷新地图数据

                <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 ?>];

如何根据所选用户在脚本中更改字符串增值税？

<!-- 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>

Answer 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 ?>];
  }.....
});