1

我的问题可能有点混乱，所以我会解释一下。

我使用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>
4

2 回答 2

2

看看select事件；您可以设置自己的侦听器以对饼图切片中的点击做出反应（icCube 在此处有一个示例）。

于 2012-07-14T01:51:36.867 回答
2

这是一个困难的问题，这不是一个完整的回答，而是关于如何解决这个问题的提示。

在这种情况下，有3种情况：

  1. API中有一种方法可以做到这一点。我想情况并非如此，因为您必须仔细阅读文档，如果有办法通过 API 做到这一点，那么有人已经回答了这个问题 ;=)
  2. 该库的实现提供了扩展挂钩。您应该查看源代码，看看是否可以扩展饼图以创建自己的饼图并在每个饼图中添加一个链接。很有可能这是可能的，但要掌握他们的设计、代码和技术环境来做到这一点可能会很费力。无论如何，如果您有时间，您应该真正尝试一下，这样做可以学到很多东西，并且这样做会增加您作为开发人员的价值。

  3. 上帝，如果你存在，请原谅我写了这篇文章。如果您无法对其进行编码或挂钩，请破解它。您可以使用 insepctor 研究渲染后生成的 SVG 的结构，并构建一个漂亮的 jQuery 选择器并修补 svg。

    $mySvgElement.find("g")
    .get(indexComputedFromRetroengineering)
    .whatEverMakesYourPieSliceALink()
;

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

  • 您必须检查每个目标平台以查看您的 hack 是否有效，因为生成的 SVG 可能与解决平台特定问题不同。它甚至可以是 VML 或 Canvas（我不知道 Google Chart 对此有何看法，但许多图表库会根据上下文切换渲染技术）
  • 如果升级库，您可能必须重写部分 hack，因为它们可以更改生成的 SVG 的结构。
  • 有人必须在您的代码上工作的那一天，他/她会讨厌您。即使他们只知道你在这样做，他们也会恨你。
  • 你会下地狱的。

但在某些情况下，它可能是唯一的方法。这取决于您想要多少，以及是否知道缺点和隐藏成本，您是否准备好为此付出代价。

于 2012-07-13T17:51:11.123 回答