Google 图表 - 设置选择不会滚动到表格可视化中的选定行

Google Chart - setSelection does not scroll to selected row in Table visualisation

本文关键字：可视化 表格 滚动 图表 设置 选择 Google      更新时间：2023-09-26

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

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

我看不到任何将视口的当前"位置"设置为表格的方法。有没有办法做到这一点？

谢谢！

下面的代码片段：

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?
    }
}
我不知道

如何使用谷歌图表 API 做到这一点，但这里有一个想法可能会有所帮助：

如果您可以找到屏幕高度、表格行高并计算屏幕可以容纳多少表格行，那么您可以计算滚动条需要滚动多少才能显示您选择的表格行。

因此，如果您的屏幕高度可以显示 20 行，并且您选择了第 25 行，则滚动条5 * rowHeight + margin . 这可能可以在 JavaScript 或 Ajax 文件中完成。

基本上，您已经拥有了执行此操作所需的所有数据，只需要找出如何在javascript中以编程方式滚动滚动条即可。

我找到了这个，它有效。

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());
}

像这样的东西。这个答案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;
                }
            }
        },
相关文章：