Question

我到处寻找。我目前有一个带有desriptionField的饼图。但是，描述显示我悬停时，以及balloonText。我希望只显示气球文字，并且只有在点击后才能显示描述。像这里https://www.amcharts.com/kbase/html-content-in-description-box-of-map-marker/

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

Answer 1

饼图没有像地图一样的描述窗口。如果要弹出div，可以使用clickSlice事件生成弹出窗口或模态。您还需要调整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库中的弹出/模态实现替换它。

如何显示＆＃34; descriptionField＆＃34;点击而不是悬停在amPieChart中？

1 个答案: