餅圖氣球

Question

我對Pie Chart Balloon有困難。 我將鏈接鏈接到氣球，但是當我將鼠標懸停在氣球上時，氣球會不斷閃爍。

如何防止氣球閃爍？

 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> 

Answer 1

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

Answer 2

氣球不是餅圖中的鏈接的最佳選擇，因為一旦將光標從切片上移到氣球上，就會發生閃爍，閃爍會消失，然后您可以單擊它。 沒有設置禁用此行為。 如果需要氣球中的鏈接，請將圖表配置的頂層中的 hideBalloonTime設置為足夠大的數目（您的注釋代碼將此設置為氣球對象級配置，這是不正確的）。 請注意，如果用戶將鼠標懸停在氣球上太長時間，“閃爍”仍會發生。

 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>