javascript - 如何在点击功能之外获取值(value)

Question

我的网页上有一个 map 的 div 和一个饼图的 div。 map 上有几个图钉，我想根据不同的点击刷新图表div。

下面是leaflet.js的点击函数:

var country = "";

map.on('click', function(e) {
  country = "Worldwide";
  alert("Set map to worldwide");
});

markerUS.on('click', function(e) {
  country = "U.S.";
  alert('U.S');
});

在chart.js(饼图)中:

AmCharts.makeChart("chartdiv1", {
  "type": "pie",
  "angle": 12,
  "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  "depth3D": 15,
  "titleField": "category",
  "valueField": "column-1",
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "align": "center",
    "markerType": "circle"
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Number of Projects distribution of " + country
  }],
  "dataProvider": [{
      "category": "a",
      "column-1": 8
    },
    {
      "category": "b",
      "column-1": 6
    },
    {
      "category": "c",
      "column-1": 2
    },
    {
      "category": "d",
      "column-1": "3"
    },
    {
      "category": "e",
      "column-1": "4"
    },
    {
      "category": "f",
      "column-1": "2"
    }
  ]
});

在“标题”内，我根据我单击的引脚将国家/地区设置为变量。

但是我发现国家/地区未定义，并且 leaflet.js 中的值国家/地区似乎没有传递给图表。为什么？如何纠正这个问题并实现该功能？

Answer 1

您获得了未定义的国家/地区，因为它的值仅在用户单击 map 或制造商时才会初始化。您可以尝试像这样更新您的代码

map.on('click', function(e) {
  var country = "Worldwide";
  makeChart(country);       
});

markerUS.on('click', function(e) {
  var country = "U.S.";
  makeChart(country);
});

function makeChart(country) {
  AmCharts.makeChart("chartdiv1", {     
      // your chart option .... 
  });
}