Question

我在网页上有一个地图div和一个饼图。地图上有几个引脚，我想根据不同的点击刷新图表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');
});

<{1>}（饼图）中的

：

chart.js

内部＆＃34;标题＆＃34;我根据我点击的图钉将国家变为变量。

但我得到的国家是未定义的，来自leaflet.js的价值国家似乎没有传递给chart.js。为什么？如何纠正这个并实现其功能？

Answer 1

您有未定义的国家/地区，因为只有在用户点击地图或制作商时才会初始化其值。您可以尝试像这样更新您的代码

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 .... 
  });
}

Answer 2

正如Trung所说，你需要调用一个能够在每次点击事件中重新绘制图表的功能

function refrechChart(country) {
   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"
    }
  ]
});
}

然后制作refrechChart函数

function refrechChart(country,value1,value2) {
 //...
}

您还可以在图表中传递更多参数，例如

{{1}}

如何在点击功能之外获取价值

2 个答案: