Question

我对Pie Chart Balloon有困难。我把链接放到了气球上，但是当我在气球上盘旋时，气球一直在闪烁。

如何防止气球闪烁？

＆＃13;

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
  }
} );

＆＃13;

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

＆＃13;

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

＆＃13;

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

气球不是饼图中链接的最佳选择，因为一旦将光标从切片上移到气球上就会出现闪烁，在您点击它之前它会消失。没有设置可以禁用此行为。如果您需要气球中的链接，请将图表配置的顶级中的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>

饼图气球

2 个答案: