Question

我使用谷歌可视化制作了一个仪表板。我的仪表板有一个在ChartWrapper的帮助下绘制的表格，我在类别过滤器的帮助下通过其中一个列过滤表格。我也有一个select事件，通过选择过滤表上的一行，将弹出第二个表。我的问题是，在过滤表并单击其中一行后，第二个表没有正确的信息。似乎过滤表上的所有行都从第一个未过滤的行中获取它们的值。您是否知道如何在过滤表上获取更新数据并使用select事件？以下是我的代码的一部分：

function drawDashboard() {

    dataUrl = $("#site_promotion_summary")[0].attributes["data-google-chart-url"].value;
    hip_get_dataTable(dataUrl, function (response) {
        var dataTable = response.getDataTable();

        // Define a category picker control for the SiteTypeName column
        var categoryPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'category_picker',
            'options': {
                'filterColumnLabel': 'SiteTypeName',
                'ui': {
                    'labelStacking': 'vertical',
                    'allowTyping': false,
                    'allowMultiple': false
                }
            }
        });

        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'site_promotion_summary',
            //'dataTable': dataTable,
            'view': { 'columns': [0, 1, 4, 5, 6, 7, 8, 9] }
        });
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).bind(categoryPicker, table).draw(dataTable);

        //Select event   
        google.visualization.events.addListener(table, 'select', function () {
            var selection = table.getChart().getSelection();
            for (var i = 0; i < selection.length; i++) {
                var item = selection[i];
                var promos = dataTable.getValue(item.row, 3);

                if (item.row != null && promos >= 2) {
                    var str = dataTable.getValue(item.row, 0);
                    var selectedSiteId = dataTable.getValue(item.row, 2);
                    var selectedRowPosition = $(".google-visualization-table-tr-sel").position();
                    drawDetail(selectedSiteId, selectedRowPosition.top + 190);

                }

            }
 });
    });
 }

function drawDetail(siteId, positionTop) {
    dataUrl = $("#detail_table")[0].attributes["data-google-chart-url"].value;
    var dataUrlFormatted = dataUrl.replace("{0}", siteId);
    hip_get_dataTable(dataUrlFormatted, function (response) {
        var dataTable = response.getDataTable();
        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'detail_table',
            'dataTable': dataTable,
            'options': { 'width': '800px', 'height': '300px' }

        });

        //format the wholesale and retail columns
        var formatter = new google.visualization.TableNumberFormat(
        { prefix: "$", negativeColor: 'black', negativeParens: true });
        formatter.format(dataTable, 1);
        formatter.format(dataTable, 2);

        //format the orderItemCount column
        var formatter = new google.visualization.TableNumberFormat(
        { groupingSymbol: "," });
        formatter.format(dataTable, 3);

        table.draw();



        $("#detail_table").css({
            position: "absolute",
            top: positionTop + "px",
            left: "400px",
            "background-color": "white"

        }).show();

    });

    $("#detail_table").click(function (event) {
        event.preventDefault();
        $(this).hide();
    });
}

Answer 1

在select listener上，我们将创建一个包含过滤数据的DataView：

 var filteredView = table.getDataTable();

然后使用filteredView：

而不是在侦听器中使用dataTable

 var promos = dataTable.getValue(item.row, 3);

谷歌可视化类别过滤器

1 个答案: