如何添加鏈接到部分谷歌餅圖

Question

我的問題可能有點混亂所以我會解釋。

我使用Google Charts制作了一個簡單的餅圖。 它很棒。 我需要知道的是能夠鏈接餅圖的所有部分/部分以顯示jquery模式/對話框彈出窗口。

我搜索了很長時間但仍然找不到任何接近的東西。

感謝大家閱讀，希望有人可以幫助我:)

這是我的代碼顯示我的圖表

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

這里的代碼與監聽器做我想要的:)

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

Answer 1

這是一個棘手的問題，這不是一個完整的答案，而是一個如何解決這個問題的提示。

在這種情況下，有3種情況：

有一種方法可以在API中完成。 我想情況並非如此，因為你必須仔細閱讀文檔，如果有辦法通過API，有人會回答這個問題; =）
庫的實現提供了擴展鈎子。 您應該查看源代碼，看看是否可以擴展餅圖以創建自己的餅圖並在每個餅圖中添加鏈接。 這種可能性很有可能，但掌握他們的設計，代碼和技術環境可能會很費力。 無論如何，如果你有時間，你應該真的嘗試，你可以通過這樣做學到很多東西，並且通過這樣做你將增加你作為開發者的價值。
上帝，如果你存在，請原諒我寫這篇文章。 如果您無法對其進行編碼或掛鈎，請將其破解。 您可以使用insepctor在渲染后研究生成的SVG的結構，並構建一個漂亮的jQuery選擇器並修補svg。
```
 $mySvgElement.find("g") .get(indexComputedFromRetroengineering) .whatEverMakesYourPieSliceALink() ; 
```

第三種方法有很多缺點，包括以下（但不僅僅是）：

您必須檢查每個目標平台以查看您的hack是否有效，因為生成的SVG可能與解決特定於平台的問題不同。 它甚至可能是VML或Canvas（我不知道谷歌圖表關於這一點是什么，但許多圖表庫切換渲染技術取決於上下文）
如果升級庫，則可能必須重寫部分hack，因為它們可以更改生成的SVG的結構。
有人必須處理你的代碼，他/她會討厭你。 即使他們只是知道你這樣做，他們也會恨你。
你會下地獄。

但在某些情況下，它可能是唯一的方法。 這取決於你想要多少，如果你知道缺點和隱藏成本，你准備支付這個價格。

Answer 2

看看選擇事件; 您可以設置自己的偵聽器以對餅圖切片中的單擊作出反應（icCube 在此處有一個示例）。

如何添加鏈接到部分谷歌餅圖

問題描述

2 個解決方案

解決方案1
2 2012-07-13 17:51:11

解決方案2
2 已采納 2012-07-14 01:51:36

如何添加鏈接到部分谷歌餅圖

問題描述

2 個解決方案

解決方案1 2 2012-07-13 17:51:11

解決方案2 2 已采納 2012-07-14 01:51:36

解決方案1
2 2012-07-13 17:51:11

解決方案2
2 已采納 2012-07-14 01:51:36