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()
;
```

第三种方法有很多缺点，包括以下（但不仅仅是）：

您必须检查每个目标平台以查看您的黑客是否有效，因为生成的SVG可能与解决平台特定问题不同。它甚至可能是VML或Canvas（我不知道Google Chart关于这一点有什么，但许多图表库切换渲染技术取决于上下文）
如果升级库，可能必须重写部分黑客，因为它们可以更改生成的SVG的结构。
当有人必须处理你的代码时，他/她会讨厌你。即使他们只是知道你这样做，他们也会恨你。
你会下地狱。

但在某些情况下，它可能是唯一的方法。这取决于你想要多少，如果知道你已经准备好支付这个价格的缺点和隐藏成本。

Answer 2

查看select事件;您可以设置自己的侦听器以对饼图切片中的单击作出反应（icCube有一个示例here）。

如何添加链接到部分谷歌饼图

2 个答案: