Javascript Google图表-setSelection不会滚动到表可视化中的选定行

我正在使用谷歌图表工具在我的网页上沿着谷歌地图显示一个表格可视化。当用户单击地图位置时，回调将自动从表中的位置列表中选择相应的位置

这可以正常工作，但表格不会自动滚动表格，因此选定的行可见（有很多点，因此只有有限的数量显示在表格右侧的滚动条上。）

我看不到将视口的当前“位置”设置为表的任何方法。有办法做到这一点吗

谢谢

下面的代码片段：

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?
    }
}

arrlocs=new google.visualization.DataTable（）；
vTable=新的google.visualization.Table（document.getElementById（'Table_div'）；
//进行初始化等。。。
.
.
.
函数更新SelectedTableItem（浮标ID）{
console.log（'搜索%s'，浮标ID）；
idx=-1；
nRows=arrlocs.getNumberOfRows（）；
对于（iRow=0；iRow=0）{
setSelection（[{row:idx，column:null}]）；
//这将高亮显示该行，但如果该行为
//已从屏幕上滚动。如何滚动表格以显示
//选定的行？
}
}

我不知道如何使用谷歌图表api，但这里有一个想法可能会有所帮助：

如果可以找到屏幕高度、表格行高度并计算屏幕中可以容纳多少表格行，则可以计算滚动条需要滚动多少才能显示所选表格行

因此，如果屏幕高度可以显示20行，并且选择了第25行，则可以滚动滚动条

5*行高+边距

。这可能可以在javascript或ajax文件中完成

---

基本上，您已经拥有了执行此操作所需的所有数据，只需找到如何使用javascript以编程方式滚动滚动条。

我发现了这一点，非常有效

$20setSelection/google可视化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());
}

---

像这样的。这个答案a）不需要jQuery，b）当所选行已经出现在屏幕上时，不要触摸滚动条

scrollOnToSelectPosition=function(element) {
            var tableElement=element.querySelectorAll("table.google-visualization-table-table")[0],
                selection=tableElement.querySelectorAll("tr.google-visualization-table-tr-sel");
            if (selection.length) {
                var parentDiv=tableElement.parentElement,
                    tableHead=tableElement.querySelectorAll("thead")[0],
                    offset=selection[0].offsetTop-tableHead.clientHeight,
                    viewHeight=parentDiv.clientHeight-tableHead.clientHeight;
                if (offset>parentDiv.scrollTop && offset<parentDiv.scrollTop+viewHeight) {
                    if (offset+selection[0].clientHeight>parentDiv.scrollTop+viewHeight) {
                        parentDiv.scrollTop=offset+selection[0].clientHeight-viewHeight;
                    }
                }
                else {
                    parentDiv.scrollTop=offset;
                }
            }
        },

scrollOnToSelectPosition=函数（元素）{
var tableElement=element.querySelectorAll（“table.google可视化表格”）[0]，
selection=tableElement.querySelectorAll（“tr.google-visualization-table-tr-sel”）；
if（选择.长度）{
var parentDiv=tableElement.parentElement，
tableHead=tableElement.querySelectorAll（“thead”）[0]，
偏移量=选择[0]。offsetTop-tableHead.clientHeight，
viewHeight=parentDiv.clientHeight-tableHead.clientHeight；
if（offset>parentDiv.scrollTop&&offsetparentDiv.scrollTop+viewHeight）{
parentDiv.scrollTop=偏移量+选择[0]。clientHeight viewHeight；
}
}
否则{
parentDiv.scrollTop=偏移量；
}
}
},

一个明智的想法-如果没有其他选择，我会同意！谢谢