0

Google チャート ツールを使用して、Google マップと一緒に Web ページに表の視覚化を表示しています。ユーザーがマップの場所をクリックすると、コールバックはテーブル内の場所のリストから対応する場所を自動的に選択します。

これは問題なく動作しますが、テーブルはテーブルを自動的にスクロールしないため、選択した行が表示されます (ポイントがたくさんあるため、テーブル vis の右側にあるスクロールバーで限られた数だけが表示されます)。

ビューポートの現在の「位置」をテーブルに設定する方法がわかりません。これを行う方法はありますか？

ありがとう！

以下のコード スニペット:

arrBuoyLocs = new google.visualization.DataTable();
vTable = new google.visualization.Table(document.getElementById('table_div'));

// do initialisation, etc...
.
.
.


function updateSelectedTableItem(buoyid) {
    console.log('Searching for %s', buoyid);

    idx = -1;
    nRows = arrBuoyLocs.getNumberOfRows();
    for(iRow = 0; iRow < nRows; iRow++) {
    if(arrBuoyLocs.getValue(iRow, 0) == buoyid) {
        console.log('Got match for %s at idx %d', buoyid, iRow);
            idx = iRow;
            break;
        }
    }

    if(idx >= 0) {
        vTable.setSelection([{row: idx, column: null}]);
        // This highlights the row but does not show it if the row is
        // scrolled off the screen. How do I scroll the Table to show
        // the selected row?
    }
}
4

3 に答える 3

3

GoogleチャートAPIでそれを行う方法がわかりませんが、役立つかもしれない考えがあります：

画面の高さ、テーブルの行の高さを見つけて、画面に収まるテーブルの行数を計算できれば、選択したテーブルの行を表示するためにスクロールバーをスクロールする必要がある量を計算できます。

したがって、20 行を表示できる画面の高さがあり、25 行を選択した場合は、スクロールバーをスクロールし5 * rowHeight + marginます。これはおそらく、javascript または ajax ファイルで行うことができます。

基本的に、必要なすべてのデータはすでにあります。JavaScriptでプログラムでスクロールバーをスクロールする方法を見つけるだけです。

于 2012-11-14T10:23:44.643 に答える
-1

私はこれを見つけました。

https://groups.google.com/forum/#!searchin/google-visualization-api/table $20setSelection/google-visualization-api/8_atzTNPmL4/etL7VZWjdVQJ

編集：これは、「table_div」で選択されたテーブルの列にスクロールします。必要な行が明確に表示されるように微調整することで、これで十分であることがわかりました。

function on_row_select() {
    // get the container div for the overflowed table
var container = $('#table_div').find('.google-visualization-table-table:eq(0)').parent();
// get the container div for the fixed header
var header = $('#table_div').find('.google-visualization-table-table:eq(1)').parent();
// get the selected row
var row = $('.google-visualization-table-tr-sel');
// set the scroll position of the overflowed div based on the offset position of the row and the height of the fixed header
$(container).prop('scrollTop', $(row).prop('offsetTop') - $(header).height());
}
于 2015-08-07T10:42:43.457 に答える