Question

我有一个看起来像这样的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>

使用以下javascript函数填充

MapDiv。它是一个返回json流的WCF。它很难加入 11-01-2017 ：

var portsMap = AmCharts.makeChart( "MapDiv", {
  "type": "map",
  "theme": "light",
  "colorSteps": 5,
  "dataLoader": {
    "url": "http://OurServer/Service1.svc/GetInfo/11-01-2017"
  ...(OTHER CODE)...
} );

我的问题是：如何更改dataloader以便根据我的下拉菜单选择加载？因此，如果我选择 12-01-2017 ，则显示的数据将来自日期。

感谢。

Answer 1

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

你的＆＃34;下拉＆＃34;而不是使用<ul>应该看起来像

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

和javascript

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()
}

amcharts网站上还有一个非常好的example

Answer 2

点击下拉菜单'AmCharts'，你需要回忆api，那是什么？（我想部分代码是调用api）

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

Answer 3

如果您正在使用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)...
    } );

});

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

3 个答案: