美国地图拉菲尔插件自动更新和动态填充颜色

我正在使用美国地图显示数据状态明智，扩展名

地图工作正常 悬停时，我成功地为每个状态提供了值。但是使用循环。

 "mouseover" : function(event, data) {    
                     $.each(__obj, function(key, value){
                       if(data.name === value.state_name){
                         var count = data.name +" : "+value.cnt;
                         $("#state_tooltip_map").show();
                         $("#state_tooltip_map").html(count);
                      }
                    });
                   },

代码工作正常，与我想要的状态颜色相同：平均最高值状态具有较深的颜色，最低值的状态具有浅色。但我不能在这里做到这一点：

"stateSpecificStyles": {
                         "VA": {fill: "teal"}
                      } ,

另一个问题是我想在不刷新页面的情况下单击提交时更新整个地图，我试过了，但它总是给我相同的值没有更新。

.JS：

'var jsArray = '.json_encode($data_map_range).'; 
       var __obj =  jsArray; 
       var post_count = [];
       $.each(__obj, function(key, value){
            post_count.push(value.cnt);
         });
         alert(post_count.sort(function(a, b){return a-b}));
       var stateColor = $("h2").css("color");
                    $("#map-range").usmap({
                     "showLabels": true,
                      "stateHoverStyles": {
                         fill: stateColor
                     },
                     "labelBackingHoverStyles": {
                         fill: stateColor,
                         "stroke": stateColor
                     },
                      "stateSpecificStyles": {
                         "VA": {fill: "teal"}
                      } ,
                    "click" : function(event, data) {
                     var selected_state_obj              = $("#" + data.name);
                     var selected_label_obj              = $("#label_" + data.name);

                     if(selected_state_obj.attr("rel") == "enabled")
                     {
                         selected_state_obj.css("fill", "#A0A0A0");
                         selected_label_obj.css("fill", "#A0A0A0");
                         selected_state_obj.attr("rel", "disabled");
                         var index = myArray.indexOf(data.name);
                         if (index > -1) {
                             myArray.splice(index, 1);
                         }            
                     }
                     else
                     {
                         selected_state_obj.attr("rel", "enabled");
                         selected_state_obj.css("fill", stateColor);
                         selected_label_obj.css("fill", stateColor);
                         myArray.push(data.name);
                          $(selected_state_obj).attr("stateStyles","stroke: #000");
                      }
                   },
                   "mouseover" : function(event, data) {    
                     $.each(__obj, function(key, value){
                       if(data.name === value.state_name){
                         var count = data.name +" : "+value.cnt;
                         $("#state_tooltip_map").show();
                         $("#state_tooltip_map").html(count);
                      }
                    });
                   },
                   "mouseout" : function(event, data) {
                     $("#state_tooltip_map").hide();
                     $("#state_tooltip_map").html("");
                   },
                    });
                    $("#mapparentrange").mousemove(function(e){
                      $("#state_tooltip_map").css({
                         left:  (parseInt(e.pageX)-$("#location_search1").offset().left + 15),
                         top:   (parseInt(e.pageY)-$("#location_search1").offset().top + 15)
                      });
                   });'

.HTML

<div style="z-index:9999; position:absolute; color:#000000; background:#FFFFFF; font-weight:bold; padding:2px; display:none; -webkit-box-shadow: 1px 1px 4px 1px rgba(145,145,145,1);-moz-box-shadow: 1px 1px 4px 1px rgba(145,145,145,1);
                                 box-shadow: 1px 1px 4px 1px rgba(145,145,145,1);" id="state_tooltip_map"></div>
                            <div id="mapparentrange">                 
                                <div id="map-range" style="width:100%; height: 240px;display: block">
                                            </div>
                            </div>