Круговая диаграмма воздушный шар - PullRequest
Новая
       47

Круговая диаграмма воздушный шар

0 голосов
/ 28 мая 2018

У меня трудности с 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>

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Воздушные шары - не лучший выбор для ссылок на круговой диаграмме, поскольку мерцание возникает, когда вы перемещаете курсор со среза на воздушный шар, который исчезнет, ​​прежде чем вы сможете щелкнуть по нему.Там нет настройки, чтобы отключить это поведение.Если вам нужна ссылка на всплывающей подсказке, установите 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>
0 голосов
/ 28 мая 2018

Добавлен 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>
...