2

データを処理していくつかの Google チャートを作成するループがあります。selectHandlerチャートのバーがクリックされたときに何かをするを追加しました。グラフを取得したらバーを選択するのに問題はありませんが、どのグラフがクリックされたかをハンドラーに伝える方法がわかりません。

コードは次のとおりです。

drawChart()ループ内にある内部：

chart[chart_index] = new google.visualization.BarChart(document.getElementById('chart_div<%= qcount  %>'));
chart[chart_index].draw(data, {width: 450, height: 300, title: 'title'});

google.visualization.events.addListener(chart[chart_index], 'select', selectHandler);
chart_index = chart_index+1;

selectHandler は次のように機能します。

function selectHandler(e) {
    var bar_index = chart[HERE_GOES_THE_CHART_INDEX].getSelection()[0].row;
}

ありがとう

4

3 に答える 3

4

イベント ハンドラーから特定のグラフを取得する方法はないため、別の方法を使用してグラフをハンドラーに渡す必要があります。これを行う方法の 1 つを次に示します。

function selectHandler(myChart) {
    // test to see if anything was selected before you get the index
    // otherwise you will get errors when the selection contains 0 elements
    var selection = myChart.getSelection();
    if (selection.length) {
        var bar_index = selection[0].row;
        // do something with bar_index
        // you should also test bar_index, as the user could have clicked a legend item, which would give a null value for row
    }
}

chart[chart_index] = new google.visualization.BarChart(document.getElementById('chart_div<%= qcount  %>'));
// generally speaking, you should add event handlers before drawing the chart
google.visualization.events.addListener(chart[chart_index], 'select', (function (x) {
    return function () {
        selectHandler(chart[x]);
    }
})(chart_index));
chart[chart_index].draw(data, {width: 450, height: 300, title: 'title'});

chart_index = chart_index+1;

このクロージャはクロージャchart_indexの内部に渡され、それを次のように割り当てますx:

(function (x) {
    return function () {
        selectHandler(chart[x]);
    }
})(chart_index)

したがって、xchart_index を後でインクリメントしても、値はクロージャー内でロックされます。クロージャーは、イベント ハンドラーになる関数を返します。この関数は を呼び出し、誰かがグラフ要素をクリックするselectHandlerと を渡します。chart[x]これをループで繰り返している場合、 の値はx各クロージャ内で一意になり、関数で特定のチャートを参照できるようになりますselectHandler。

于 2013-11-23T15:16:56.280 に答える
0

Google視覚化イベント処理を読んだ後...

SELECT イベント:

select イベントは、プロパティやオブジェクトをハンドラーに渡しません (関数ハンドラーは、パラメーターが渡されることを想定してはなりません)。

そのため、getSelection() を使用できますが、どのチャートが処理されたかを判断するには別の関数が必要です。別のイベント ハンドラーに入ります。

// google.visualization.table exposes a 'page' event.
google.visualization.events.addListener(table, 'page', myPageEventHandler);
...
function myPageEventHandler(e) {
  alert('The user is navigating to page ' + e['page']);
}

どのチャートがイベントされているかを判断できるように、param に渡されたイベント オブジェクトを持つイベント ハンドラーが必要です。現在のチャートを取得したら、 getSelection() を使用して、そのチャートの現在の選択を確認できます。

于 2013-11-08T15:07:52.353 に答える