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

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

我想在我的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个包含管脚数据的字符串变量：

$graph3\u文本\u国家\u str\u每日

$graph3\u文本\u国家\u str\u每周

$graph3\u text\u countries\u str\u每月

$graph3\u文本\u国家\u结构\u每年

请看下面脚本的最后一部分。在最后一行，我添加了相关的字符串变量：

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

imageSeries.data=[]；

如何根据用户选择的内容更改脚本中的字符串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>

am4core.ready（函数（）{
//主题开始
am4core.useTheme（am4themes_动画）；
//主题结束
/**
*为目标图标定义SVG路径
*/
9.9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 10 10 10 10 10 10 10 10 10 10 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 1.5,7.067,12.5,9z”；
//创建地图实例
var chart=am4core.create（“世界地图2”，am4maps.MapChart）；
//设置地图定义
chart.geodata=am4geodata\u worldLow；
//集合投影
chart.projection=新的am4maps.projections.Miller（）；
//创建地图多边形系列
var polygonSeries=chart.series.push（新的am4maps.mappygonseries（））；
//排除关节炎
polygoseries.exclude=[“AQ”]；
//使地图从GeoJSON加载多边形（如国家名称）数据
polygoseries.useGeodata=true；
//配置系列
var polygontamplate=polygonSeries.mapPolygons.template；
PolygontTemplate.strokeOpacity=0.5；
polygonTemplate.nonScalingStroke=true；
//创建资本标记
var imageSeries=chart.series.push（新的am4maps.MapImageSeries（））；
//定义模板
var imageSeriesTemplate=imageSeries.mapImages.template；
var circle=imageSeriesTemplate.createChild（am4core.Sprite）；
圆圈。刻度=0.4；
circle.fill=new am4core.interface颜色集（）.getFor（“alternativeBackground”）；
circle.path=targetSVG；
//规模呢。。。
//设置属性字段
imageSeriesTemplate.propertyFields.latitude=“纬度”；
imageSeriesTemplate.propertyFields.longitude=“经度”；
imageSeriesTemplate.horizontalCenter=“中间”；
imageSeriesTemplate.verticalCenter=“中间”；
imageSeriesTemplate.align=“中心”；
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（“悬停”）；
imageSeries.data=[]；
}); // 结束am4core.ready（）

首先，将数据初始化到错误的对象。你必须把你的数据输入图表 对象并在每次选择更改时重新加载数据。然后使用类似的方法：

$('#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 ?>];
  }.....
});

$（'map#u duration'）。在（'change'，function（）上{
如果（this.value=='daily'）{
chart.data=[]；
}else if（this.value=='weekly'）{
chart.data=[]；
}.....
});

首先，将数据初始化到错误的对象。你必须把你的数据输入图表 对象并在每次选择更改时重新加载数据。然后使用类似的方法：

$('#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 ?>];
  }.....
});

$（'map#u duration'）。在（'change'，function（）上{
如果（this.value=='daily'）{
chart.data=[]；
}else if（this.value=='weekly'）{
chart.data=[]；
}.....
});