饼图气球答案

【问题标题】：Pie Chart Balloon饼图气球
【发布时间】：2018-05-28 01:15:05
【问题描述】：

我对@987654321@ 有疑问。我放了气球的链接，但是当我将鼠标悬停在气球上时，气球一直在闪烁。

如何防止气球闪烁？

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, // allow click
    "fixedPosition": true
  },
  "valueField": "value",
  "titleField": "status",
  "colorField": "color",
  "outlineAlpha": 0.4,
  "depth3D": 30,
  "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br><a href='#' data-toggle='modal' data-target='#completed'>View Data</a></span>",
  "angle": 50,
  "export": {
    "enabled": true
  }
} );

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

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

【问题讨论】：

你能发布你源代码的工作代码sn-p吗？您可以使用 codepen/jsfiddle/plunker 或其他类似的服务
@VicJordan 先生，我已经在 codepen 上发布了代码，谢谢
也许这是件好事。饼图很少是信息数据可视化的最佳图表。请改用其他图表，例如水平条形图。它们更容易理解。

标签： javascript charts pie-chart amcharts

【解决方案1】：

气球不是饼图中链接的最佳选择，因为一旦将光标从切片上移到气球上就会出现闪烁，在您单击它之前它就会消失。没有禁用此行为的设置。如果您需要气球中的链接，请将图表配置的顶级中的hideBalloonTime 设置为足够大的数字（您的注释代码将此设置为气球-object 级别的配置，这是不正确的）。请注意，如果用户将鼠标悬停在气球上的时间过长，仍然会出现“闪烁”。

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "hideBalloonTime": 2000, //hideBalloonTime is set here. Value in milliseconds
  "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, // does NOT go here
    "disableMouseEvents": false, // allow click
    "fixedPosition": true
  },
  "valueField": "value",
  "titleField": "status",
  "colorField": "color",
  "outlineAlpha": 0.4,
  "depth3D": 30,
  "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br><a href='#' data-toggle='modal' data-target='#completed'>View Data</a></span>",
  "angle": 50,
  "export": {
    "enabled": true
  }
} );

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

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

在这种情况下，更好的选择是使用 CSS 使切片看起来是可点击的，使用 addClassNames 并使用 clickSlice 事件来触发您的链接（或模式，在您的情况下）：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "addClassNames": true, //needed to change cursor for pie slice in CSS
  "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, // allow click
    "fixedPosition": true
  },
  "valueField": "value",
  "titleField": "status",
  "colorField": "color",
  "outlineAlpha": 0.4,
  "depth3D": 30,
  "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br>Click slice to view data</span>",
  "angle": 50,
  "export": {
    "enabled": true
  },
  "listeners": [{
    "event": "clickSlice",
    "method": function(e) {
      $("#complete").modal('show');
    }
  }]
});

$("#complete").modal({show: false});

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

/* change cursor when hovering over slice */
.amcharts-pie-slice {
  cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"  crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"  crossorigin="anonymous"></script>
<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 class="modal fade" id="complete" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

在 CSS 文件中添加了svg>g>g:last-child { pointer-events: none }，看起来工作正常。

检查以下工作代码：

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, // allow click
    "fixedPosition": true
  },
  "valueField": "value",
  "titleField": "status",
  "colorField": "color",
  "outlineAlpha": 0.4,
  "depth3D": 30,
  "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)<br><a href='#' data-toggle='modal' data-target='#completed'>View Data</a></span>",
  "angle": 50,
  "export": {
    "enabled": true
  }
});

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

svg>g>g:last-child {
  pointer-events: none
}

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

【讨论】：

谢谢你，但它仍然在闪烁，我正在寻找另一个解决方案，但我找不到..
@Darsil 但对我来说它没有闪烁。你是怎么检查的？
@VicJordan - 它不适用于代码 sn-p 示例。只需全屏查看即可。