2

私は一日中この問題を研究してきましたが、成功しませんでした。いくつかのデータを表示する Google チャートがありますが、問題なく動作します。

私は、約十数個のグラフの凡例項目を含む、やや詳細なグラフに取り組んできました。凡例をグラフの下に表示したかったので、その位置を下に設定しました。

しかし、チャートによって生成される「醜い」ページネーションは、マネージャーにとってあまり魅力的ではありません。

だから私はそれを隠して、いくつかのカスタムjavascriptingでページネーションなしでグラフの下の凡例項目を再レンダリングしました(実際に私はここからコードを見ましたhttp://jsfiddle.net/asgallant/6Y8jF/2/ )

var legend = document.getElementById('legend');
    var lis = [];

    var total = 0;
    for (var i = 0; i < data.length; i++) {
        var legendValue = data[i];

        if(legendValue.indexOf("PROVIDER") == -1){

            // create the legend entry
            lis[i] = document.createElement('li');
            lis[i].id = 'legend_' + legendValue;
            lis[i].className = 'legendary';
            lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';">' + legendValue + '</div>';

            // append to the legend list
            legend.appendChild(lis[i]);
        }
    }

したがって、実際のグラフの凡例とほぼ同じ機能を備えていますが、1 つ欠けています。元の Google チャートの凡例にカーソルを合わせると、グラフ上の項目が次の例のように強調表示されます。

http://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper

ドイツまたは米国にカーソルを合わせると、グラフのバーが選択または強調表示されます。

リスト アイテムから同じ動作をトリガーするにはどうすればよいですか?

私はもう試した ：

function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('Events');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
 }

$(document).on("hover", ".legendary", function(){
        eventFire(document.getElementById('graphico'),'select');
        eventFire(document.getElementById('graphico'),'onmouseover');
        $("#graphico").trigger("onmouseover");
        $("#graphico").trigger("select");
        console.log("fired hover event");
    });

firebug で "fired hover event" メッセージが表示されますが、グラフでは何も起こりません。

onmouseover リスナーをグラフに追加しました (この関数が起動されます)。

google.visualization.events.addListener(ga_chart, 'onmouseover', function(e) {
        console.log("listening bruv");
      });

しかし、グラフの特定の部分を選択する方法がわかりません。

メイングラフで強調表示を引き起こすこれらのイベントのいずれかを呼び出そうとしています:

https://developers.google.com/chart/interactive/docs/gallery/piechart#Events

アイデアやコメントをいただければ幸いです。

4

1 に答える 1

5

関連する行を識別できる属性を li-elements に追加します。

// 凡例エントリを作成します
lis[i] = document.createElement('li');
lis[i].setAttribute('データ行',i);

チャートを描画した後、これを呼び出します：

   $('#legend li').hover(function(){
      chart.setSelection([{row:$(this).data('row'),column:null}]);
    },function(){
      chart.setSelection(null);
    });

デモ: http://jsfiddle.net/doktormolle/2JWQY/

于 2013-01-07T16:29:55.443 に答える