饼图气球

Question

我 Pie Chart Balloon 有困难。我将 link 放到气球上，但是当我将鼠标悬停在气球上时，气球会保持 blinking.

如何防止气球飞link？

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

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

检查下面的工作代码：

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

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

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 and use the clickSlice 事件来触发您的 link （或模式，在您的情况下） ):

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>

饼图气球

Pie Chart Balloon

javascript

charts

amcharts

pie-chart