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

選択したイベントをご覧ください。パイスライスのクリックに反応するように独自のリスナーを設定できます（icCubeにはここに例があります）。

于 2012-07-14T01:51:36.867 に答える
2

これは難しい質問であり、完全な回答ではありませんが、この問題をどのように解決できるかについてのヒントです。

このような状況では、次の3つのケースがあります。

  1. APIでそれを行う方法があります。ドキュメントを注意深く読んでおく必要があるため、そうではないと思います。APIを介してそれを行う方法があれば、誰かがすでにこの質問に答えているでしょう; =）
  2. ライブラリの実装は拡張フックを提供します。ソースコードを調べて、円グラフを拡張して独自の円グラフを作成し、円の各スライスにリンクを追加できるかどうかを確認する必要があります。それが可能である可能性は十分にありますが、それを行うのに十分な設計、コード、および技術環境を習得するのは大変な作業になる可能性があります。とにかく時間があれば本当にやってみるべきです。そうすることでたくさんのことを学ぶことができ、そうすることで開発者としての価値を高めることができます。

  3. 神様、もしあなたが存在するなら、これを書いたことを許してください。コーディングやフックができない場合は、ハックしてください。insepctorを使用して、レンダリング後に生成されたSVGの構造を調べ、優れたjQueryセレクターを構築してsvgにパッチを適用できます。

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

3番目の方法には、次のような多くの欠点があります（ただし、それだけではありません）。

  • 生成されたSVGは回避策のプラットフォーム固有の問題とは異なる可能性があるため、すべてのターゲットプラットフォームをチェックして、ハッキングが機能するかどうかを確認する必要があります。VMLまたはCanvasの場合もあります（この点に関してGoogle Chartが何をしているのかわかりませんが、多くのチャートライブラリはコンテキストに応じてレンダリングテクノロジーを切り替えます）
  • ライブラリをアップグレードする場合は、生成されたSVGの構造が変更される可能性があるため、ハックの一部を書き直す必要がある場合があります。
  • 誰かがあなたのコードに取り組まなければならない日、彼/彼女はあなたを憎むでしょう。そして、たとえ彼らがあなたがしていることを知っているとしても、彼らはあなたを憎むでしょう。
  • あなたは地獄に行きます。

しかし、場合によってはそれが唯一の方法かもしれません。それはあなたがそれをどれだけ欲しいか、そしてあなたがその価格を支払う準備ができているかどうか、欠点と隠れたコストを知っているかどうかに依存します。

于 2012-07-13T17:51:11.123 に答える