How to leave a clickable pie chart

Navigation
1

My question is how do I make a pie chart clickable. Type, invoke a function to filter a list from the click on one of the chart part. I'm currently using Angular-nvd3 , but I could not, even with the material , subsidies to manipulate as I need. Many thanks for the help!

    
asked by anonymous 15.09.2017 / 01:41

1 answer

1

You only need to add the pie -> dispatch -> elementClick event in the chart options: 

pie: {
  dispatch: {
    elementClick: function(evento){ console.log(evento) }
  }
}


angular
  .module('meuApp', ['nvd3'])
  .controller('MeuController', MeuController);

MeuController.$inject = [];

function MeuController() {
  var vm = this;

  vm.opcoes = {
    chart: {
      type: 'pieChart',
      pie: {
        dispatch: {
          elementClick: function(evento){ console.log(evento) }
        }
      },
      height: 500,
      x: function(d) {
        return d.key;
      },
      y: function(d) {
        return d.y;
      },
      showLabels: true,
      duration: 500,
      labelThreshold: 0.01,
      labelSunbeamLayout: true,
      legend: {
        margin: {
          top: 5,
          right: 35,
          bottom: 5,
          left: 0
        }
      }
    }
  };

  vm.dados = [
    {key: "One", y: 5},
    {key: "Two", y: 2},
    {key: "Three", y: 9},
    {key: "Four", y: 7},
    {key: "Five", y: 4},
    {key: "Six", y: 3},
    {key: "Seven", y: .5}
  ];
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>

<div ng-app="meuApp">
  <div ng-controller="MeuController as vm">
    <nvd3 options="vm.opcoes" data="vm.dados"></nvd3>
  </div>
</div>
    
15.09.2017 / 21:33
Help with php_printer.dll Jquery - Select and deselect elements on the page