基于下拉单击更改javascript中的数据源？_Javascript_Html_Wcf_Amcharts

基于下拉单击更改javascript中的数据源？

javascript html wcf

基于下拉单击更改javascript中的数据源？,javascript,html,wcf,amcharts,Javascript,Html,Wcf,Amcharts,我有一个HTML页面，看起来像这样。它包括一个下拉列表和一个用于显示地图的div： <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <scr

我有一个HTML页面，看起来像这样。它包括一个下拉列表和一个用于显示地图的div：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Month<span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">11-01-2017</a></li>
      <li><a href="#">12-01-2017</a></li>
    </ul>
  </div>
    <div>
        <div id="MapDiv" ></div>
    </div>
    </div>

我的问题是：如何更改dataloader，使其基于我的下拉选择进行加载？因此，如果我选择2017年1月12日，那么显示的数据将是从日期开始的

谢谢。

您需要在单击下拉列表“AmCharts”时调用api，这是什么？我想代码的一部分是调用api

在dropdown div元素和回调函数recall portsMap中使用新参数观察onclick事件

我会在下拉列表中添加一个监听器，您应该将其更改为使用带有选项的select标记。在更改时，我会在地图对象中设置url，然后在dataLoader对象上调用.loadData来更新它

您的下拉列表而不是使用

<select id="myDropDown" class="dropdown-menu">
  <option value="11-01-2017">11-01-2017</option>
  <option value="12-01-2017">12-01-2017</option>
</select>

amcharts网站上也有一个非常好的工具

如果您使用jQuery，您可以通过如下所述更改代码来实现这一点

$('ul.dropdown-menu li a').click(function(e) {

    e.preventDefault();

    var dataloader = "http://OurServer/Service1.svc/GetInfo/" + $(this).html();

    var portsMap = AmCharts.makeChart( "MapDiv", {
      "type": "map",
      "theme": "light",
      "colorSteps": 5,
      "dataLoader": {
        "url": dataloader
      //...(OTHER CODE)...
    } );

});

何时调用AmCharts.makeChart？您可以在下拉列表中使用onChange处理程序。在makeChart函数中传递日期值。除了必须更改validateData行以从dataLoader对象调用loadData以从新URL（例如portsMap.dataLoader.loadData）重新加载外，这基本上是正确的。validateData不会重新触发数据加载程序。感谢您的回复。它起作用了，但我不得不做一些改变。我必须为document.getElementByIdmyDropDown.onchange=setMapURL创建一个函数；并将OnChange添加到下拉列表中。这样就可以了。你不应该再次调用makeChart来重新绘制地图，因为它会消耗额外的资源。Andrew的答案是除了将validateData调用更改为loadData之外的另一种方法，正如我在评论中提到的。

document.getElementById("myDropDown").onchange=setMapURL;

function setMapURL(event) {
  var newDate= event.target.value;
  portsMap.dataLoader.url = "http://OurServer/Service1.svc/GetInfo/" + newDate;
  portsMap.dataLoader.loadData()
}

$('ul.dropdown-menu li a').click(function(e) {

    e.preventDefault();

    var dataloader = "http://OurServer/Service1.svc/GetInfo/" + $(this).html();

    var portsMap = AmCharts.makeChart( "MapDiv", {
      "type": "map",
      "theme": "light",
      "colorSteps": 5,
      "dataLoader": {
        "url": dataloader
      //...(OTHER CODE)...
    } );

});