AmCharts饼图Balloon添加链接后hover闪烁问题求助

我来帮你搞定这个气球闪烁的问题！这种情况其实是因为气球内的可交互元素干扰了图表的鼠标事件逻辑，下面给你详细解释原因和两种可行的解决方案。

问题原因 #

当你在Balloon中加入<a>标签这类可点击元素后，鼠标悬停在气球上时，会触发图表的mouseout事件——因为鼠标从饼图切片区域移到了气球的DOM元素上，图表会认为鼠标离开了切片，从而隐藏气球；紧接着，鼠标又处于切片的附近范围，图表会再次触发mouseover事件让气球重新显示，如此反复就造成了闪烁现象。

解决方案 #

方案一：阻止气球内元素的事件冒泡 #

这种方法最简单，只需要修改balloonText中的链接，添加onclick事件阻止事件冒泡，这样鼠标在气球上的操作就不会干扰图表的鼠标监听：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [
    { "status": "Completed", "value": 100, "color": "#33cc33" },
    { "status": "On-Going", "value": 59, "color": "#1a53ff" },
    { "status": "PRE Procurement", "value": 36, "color": "#ff0066" },
    { "status": "DED Prep", "value": 40, "color": "#cc66ff" },
    { "status": "Under Prep / Not Yet Started", "value": 23, "color": "#999966" },
    { "status": "Suspended", "value": 34, "color": "#663300" },
    { "status": "Cancelled", "value": 23, "color": "#ff0000" },
    { "status": "No Status Yet", "value": 21, "color": "#ffff66" }
  ],
  "startDuration": 1,
  "balloon": {
    //"hideBalloonTime": 1000, // 1second
    "disableMouseEvents": false, // 保持允许点击
    "fixedPosition": true
  },
  "valueField": "value",
  "titleField": "status",
  "colorField": "color",
  "outlineAlpha": 0.4,
  "depth3D": 30,
  // 修改balloonText，给链接添加阻止冒泡的逻辑
  "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br><a href='#' onclick='event.stopPropagation();' data-toggle='modal' data-target='#completed'>View Data</a></span>",
  "angle": 50,
  "export": { "enabled": true }
});

方案二：使用图表事件处理点击（更稳妥） #

如果担心事件冒泡的兼容性问题，可以采用这种方法：禁用气球的鼠标事件，然后通过图表的clickBalloon事件来处理链接的点击逻辑，彻底避免鼠标事件冲突：

修改后的完整代码：

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

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

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [
    { "status": "Completed", "value": 100, "color": "#33cc33" },
    { "status": "On-Going", "value": 59, "color": "#1a53ff" },
    { "status": "PRE Procurement", "value": 36, "color": "#ff0066" },
    { "status": "DED Prep", "value": 40, "color": "#cc66ff" },
    { "status": "Under Prep / Not Yet Started", "value": 23, "color": "#999966" },
    { "status": "Suspended", "value": 34, "color": "#663300" },
    { "status": "Cancelled", "value": 23, "color": "#ff0000" },
    { "status": "No Status Yet", "value": 21, "color": "#ffff66" }
  ],
  "startDuration": 1,
  "balloon": {
    "disableMouseEvents": true, // 禁用气球的鼠标事件，避免干扰图表
    "fixedPosition": true
  },
  "valueField": "value",
  "titleField": "status",
  "colorField": "color",
  "outlineAlpha": 0.4,
  "depth3D": 30,
  // 将链接改为普通span，用自定义属性标记模态框目标
  "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br><span class='balloon-link' data-modal='#completed' style='cursor:pointer;color:#1a53ff;text-decoration:underline;'>View Data</span></span>",
  "angle": 50,
  "export": { "enabled": true }
});

// 监听图表的点击气球事件
chart.addListener("clickBalloon", function(event) {
  var target = event.event.target;
  // 判断点击的是自定义的链接元素
  if (target.classList.contains('balloon-link')) {
    var modalId = target.getAttribute('data-modal');
    // 触发模态框显示
    $(modalId).modal('show');
  }
});

这种方法通过图表原生事件处理点击，完全隔离了气球和图表的鼠标事件，从根源上解决了闪烁问题，同时也能实现打开模态框的需求。

内容的提问来源于stack exchange，提问作者Darsil