2017-09-27 142 views
1

我有一个HighMaps美国县地图精美地显示在具有固定数据的网页上(在我的代码中名为tableResult)。这是一个jQuery网页的一部分,它根据用户从页面上的各种选择中选择的参数为美国各县着色。选择参数后,他们点击一个按钮,查看他们选择的最佳县(三种不同的颜色)。结果可能只是几个县或几百个。提交按钮正在调用一个Web服务,该服务返回一个格式如下的tableResult格式的字符串,但具有基于其选择的个性化值。所有这一切都很好!HighMaps如何使用jQuery更新数据

我很确定这是一个范围问题,但我不知道如何更新地图,每次用户更改他们的选择并激活提交按钮。现在,用户参数不受此之前所有的jQuery控制:

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     alert("jQuery document ready"); 
     var e = jQuery(this).val(); 
     return e && (window.location = e), !1 
    }); 
</script> 

即由几个用户输入选择控件,所有的工作,然后再HighMaps代码,我有以下。

我很尴尬地说,我不知道如何填充tableResult值与从web服务返回的数据字符串。这里是一个调用Web服务(和Web服务正在恢复,就像我想要一个漂亮的JSON字符串),我有以下功能:

function GetCounties(pk, rk) { 
    jQuery.support.cors = true; 
    $.ajax({ 
     url: "http://www.mywebsite.com/api/products/2", 
     type: "GET", 
     dataType: "json", 
     success: function (d) { 
      data = JSON.stringify(d); 
      alert("API found data: " + JSON.stringify(d)); 
     }, 
     error: function (d) { 
      alert("API found error: " + JSON.stringify(d)); 
     } 
    }); 
} 

下面是HighMaps代码显示的地图(目前只用现在位于tableResult变量中的两个固定的县作为占位符)。

$.noConflict(); 
    (function ($) { 
     // eliminate the following two lines when actual tableResult data is coming from table service 
     var tableResult = '[{"code":"us-al-001","name":"Autauga County, AL","value":1}, {"code":"us-il-019","name":"Champaign County, IL","value":3}]'; 
     data = JSON.parse(tableResult); 

     var countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"]); 
     var lines = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"], "mapline"); 

     // add state acronym for tooltip 
     Highcharts.each(countiesMap, function (mapPoint) { 
      var state = mapPoint.properties["hc-key"].substring(3, 5); 
      mapPoint.name = mapPoint.name + ", " + state.toUpperCase(); 
     }); 

     var options = { 
      chart: { 
       borderWidth: 1, 
       marginRight: 50 // for the legend 
      }, 

      exporting: { 
       enabled: false 
      }, 

      title: { 
       text: "My Best Locations" 
      }, 

      legend: { 
       layout: "vertical", 
       align: "right", 
       floating: true, 
       valueDecimals: 0, 
       valueSuffix: "", 
       backgroundColor: "white", 
       symbolRadius: 0, 
       symbolHeight: 0 
      }, 

      mapNavigation: { 
       enabled: false 
      }, 

      colorAxis: { 
       dataClasses: [{ 
        from: 1, 
        to: 1, 
        color: "#004400", 
        name: "Perfect!" 
       }, { 
        from: 2, 
        to: 2, 
        color: "#116611", 
        name: "Very Nice!" 
       }, { 
        from: 3, 
        to: 3, 
        color: "#55AA55", 
        name: "Good Fit" 
       }] 
      }, 

      tooltip: { 
       headerFormat: "", 
       formatter: function() { 
        str = "Error"; 
        if (this.point.value == 1) { 
         str = "Perfect!"; 
        } 
        if (this.point.value == 2) { 
         str = "Very Nice!"; 
        } 
        if (this.point.value == 3) { 
         str = "Good Fit"; 
        } 
        return this.point.name + ": <b>" + str + "</b>"; 
       } 
      }, 
      plotOptions: { 
       mapline: { 
        showInLegend: false, 
        enableMouseTracking: false 
       } 
      }, 

      series: [{ 
       mapData: countiesMap, 
       data: data, 
       joinBy: ["hc-key", "code"], 
       borderWidth: 1, 
       states: { 
        hover: { 
         color: "brown" 
        } 
       } 
      }, { 
       type: "mapline", 
       name: "State borders", 
       data: [lines[0]], 
       color: "black" 
      }] 
     }; 

     // Instanciate the map 
     $("#map-container").highcharts("Map", options); 
})(jQuery); 

我需要的是地图每次用户点击提交按钮时都会更新Web服务的结果。任何想法将不胜感激!

+0

你能添加与您提交交易的JS点击?例如$(“#mySubmitButton”)。on(“click”,function(){//获取一些数据...}); – Icewine

+0

  • <按钮类= “按钮” 的onclick = “GetCounties( 'C4-7P4-6L3-5', 'H5F4M3B4T3');返回false;”>更新县
  • (这两个参数将基于用户选择来设置已经被选中 –

    回答

    0

    变化事件的方式被添加到一个按钮(例如使用bind)。 bind函数的第二个参数是包含其他参数的对象(您的pkrk)。它可以是这样的:

    jQuery('.button').bind('click', { 
        pk: 'C4-7P4-6L3-5', 
        rk: 'H5F4M3B4T3' 
    }, function(e) { 
        var data = e.data, 
        pk = data.pk, 
        rk = data.rk; 
    
        GetCounties(pk, rk); 
    }); 
    

    还有,记得从阿贾克斯的数据来更新图表:

    $("#map-container").highcharts().series[0].update({ 
        data: JSON.parse(d) 
    }); 
    

    例子:
    http://jsfiddle.net/ay3jyrk1/

    +0

    这是一个很棒的答案 - 我已经将你的想法整合到了我的网站中,并且效果很好!我有一个我也需要移除的jQuery(document).ready(function()我只是希望我有足够的声誉给你充分的信用! –

    +0

    没问题,我很高兴能够帮到你。 –

    0

    这可能是你说的范围问题。一种检查方法是改变点击功能来使用这样的东西。

    $("body").on("click", ".button", function() { 
     
        // just some test variables, pass the correct values for pk rk however you need. 
     
        var pk = $("#pk").val(); 
     
        var rk = $("#rk").val(); 
     
        GetCounties(pk,rk); 
     
    }); 
     
    
     
    function GetCounties(pk, rk) { 
     
        // do something 
     
        console.log(pk, rk); 
     
    
     
        jQuery.support.cors = true; 
     
        $.ajax({ 
     
        url: "http://www.mywebsite.com/api/products/2", 
     
        type: "GET", 
     
        dataType: "json", 
     
        success: function(d) { 
     
         data = JSON.stringify(d); 
     
         alert("API found data: " + JSON.stringify(d)); 
     
        }, 
     
        error: function(d) { 
     
         alert("API found error: " + JSON.stringify(d)); 
     
        } 
     
        }); 
     
    
     
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     
    
     
    TEST pk:<input id="pk" type="text" value="C4-7P4-6L3-5"><br> 
     
    TEST rk:<input id="rk" type="text" value="H5F4M3B4T3"> 
     
    <br> 
     
    <li><button class="button">Update Counties</button></li>