可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

My question maybe a little confuse so I will explain.

I used Google Charts to make a simple pie chart. It works great. What I need know is to be able to link all section/part of the pie to display a jquery modal/dialog popup.

I searching for a long time but still can't found anything close to that.

Thanks all for reading and hope someone can help me :)

Here my code to display my chart

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Clan');
    data.addColumn('number', 'Vampire');
    data.addRows([
    <? foreach($this->toDisplay as $oClan) 
        {
            echo "['".$oClan->getName()."', ".count($oClan->getMembers()).']';
            echo ", ";
        } ?>
    ]);
    var options = {'title':'Effectif des clans',
                   'width':600,
                   'height':600};
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<body>
<div id="chart_div"></div>
</body>

Here the code with the listener that do what I wanted :)

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"> 
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Clan');
    data.addColumn('number', 'Vampire');
    data.addRows([
    <? foreach($this->toDisplay as $oClan) 
        {
            echo "['".$oClan->getName()."', ".count($oClan->getMembers()).']';
            echo ", ";
        } ?>
    ]);
    var options = {'title':'Effectif des clans',
                   'width':600,
                   'height':600};
    var chart = new      google.visualization.PieChart(document.getElementById('chart_div'));



    function selectHandler() {
      var selectedItem = chart.getSelection()[0];
      if (selectedItem) {
        var topping = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + topping);
      }
    }

    google.visualization.events.addListener(chart, 'select', selectHandler);            
    chart.draw(data, options);


  }
</script>
</head>

<body>
<div id="chart_div"></div>
</body>
</html>

回答1:

Have a look to the select event; you can setup your own listener to react on click in the pie slices (icCube has an example here).

回答2:

This is a difficult question, and this is not a complete response, but a hint on how you could solve this issue.

In this kind of situations, there are 3 cases:

There is a way to do it in the API. I guess it's not the case, because you must have carefully read through the documentation, and if there was a way to do it through the API someone would have answered this question already ;=)
The library's implementation provides extension hooks. You should look at the source code to see if you can extend the Pie chart to create your own pie chart and add a link in each slice of pie. There is a good probability that it's possible, but it can be taxing to master their design, their code, and their technical environement enough to do that. Anyways you should really try if you have the time, you can learn a lot by doing this, and you will increase your value as a developper by doing so.
God, if you exist, forgive me for writing this. If you can't code it or hook it, hack it. You can use the insepctor to study the structure of the generated SVG after the rendering, and build a nice jQuery selector and patch the svg.
```
$mySvgElement.find("g")
    .get(indexComputedFromRetroengineering)
    .whatEverMakesYourPieSliceALink()
;
```

The third method has a lot of drawbacks, including the following (but not only):

You have to check every single target platform to see if your hack works, because the generated SVG could be different to workaround platform specific issue. It could even be VML or Canvas (I don't know what does Google Chart regarding this point, but many chart library switch rendering technology depending on the context)
You may have to rewrite a part of your hack if you upgrade the library, because they can change the structure of the generated SVG.
The day someone has to work on your code he/she will hate you. And even if they just know you are doing that they will hate you.
You will go to hell.

But it may in some cases be the only way. It depends on how much you want it and if, knowing the drawbacks and hidden costs you are ready to pay that price.