如何在 amPieChart 中单击而不是悬停时显示 "descriptionField"？

Question

我到处都看过了。我目前有一个带有 desriptionField 的饼图。但是，当我将鼠标悬停时，描述会与气球文本一起显示。我只希望显示气球文本，并且只有在单击后才能显示说明。喜欢这里https://www.amcharts.com/kbase/html-content-in-description-box-of-map-marker/

除了上面的演示是针对地图的，而我使用的是饼图

Answer 1

饼图没有像地图那样的描述window。如果要弹出 div，可以使用 clickSlice event to generate a popup or modal. You also need to tweak the balloonText 属性从字符串中删除 [[description]] 标记（例如："balloonText": "[[title]]: [[percents]]% ([[value]])"）。这是一个使用自定义 div 弹出窗口的非常基本的示例：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [{
    "country": "Lithuania",
    "litres": 501.9,
    "description": "This is a test description for Lithuania."
  }, {
    "country": "Czech Republic",
    "litres": 301.9,
    "description": "This is a test description for Czech Republic."
  }, {
    "country": "Ireland",
    "litres": 201.1,
    "description": "This is a test description for Ireland."
  }, {
    "country": "Germany",
    "litres": 165.8,
    "description": "This is a test description for Germany."
  }],
  "valueField": "litres",
  "titleField": "country",
  "balloonText": "[[title]]: [[percents]]% ([[value]])",
  "balloon": {
    "fixedPosition": true
  },
  "listeners": [{
    "event": "clickSlice",
    "method": function(e) {
      var desc = document.getElementById("description");
      desc.style.top = e.event.pageY + "px";
      desc.style.left = e.event.pageX + "px";
      desc.style.display = "block";
      desc.innerHTML = "<p><strong>" + e.dataItem.title + "</strong><br>Litres: " + e.dataItem.value + "<br>" + e.dataItem.dataContext.description + "</p>";
    }
  }]
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

#description {
  position: absolute;
  top: -99999;
  left: -99999;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.8);
  padding: 6px;
  font-size: 14px;
  color: #000;
  display: none;
  margin: 20px 0 0 20px;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="description"></div>

您可以为此添加自己的关闭按钮，或将其替换为您最喜欢的 UI 库中的 popup/modal 实现。

如何在 amPieChart 中单击而不是悬停时显示 "descriptionField"？

How can I show the "descriptionField" on click instead of hover in an amPieChart?

amcharts