如何将侦听器事件添加到控件

Question

我试图弄清楚如何获取控件（[categoryPicker，stringFilter]），触发绘制表格，而不是在页面加载时自行加载表格。

我不太确定是否应该使用 (ready event) 或 (select event) 来触发此行为。我在网上找不到任何使用控件呈现图表/表格的示例。如果有人可以提供一些指南或示例，将不胜感激。到目前为止，我已经开始在下面的代码中声明侦听器事件：

  function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
        if (dataValues.length < 1)
            return;

        var data = new google.visualization.DataTable();
        data.addColumn('string', columnNames.split(',')[0], 'name');
        data.addColumn('number', columnNames.split(',')[1], 'price');
        data.addColumn('string', columnNames.split(',')[2], 'type');
        data.addColumn('datetime', columnNames.split(',')[3], 'date');

        for (var i = 0; i < dataValues.length; i++) {

            var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));

            data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
        }


        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'TableContainer',
            'options': {
                'width': '900px'
            }
        });

        var categoryPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control2',
            'options': {
                'filterColumnLabel': columnNames.split(',')[3],
                'filterColumnIndex': '3',

                'ui': {
                    'labelStacking': 'horizontal',
                    'allowTyping': false,
                    'allowMultiple': false,
                    'caption': categoryCaption,
                    'label': 'Date',
                }
            }
        });

        // Define a StringFilter control for the 'Name' column
        var stringFilter = new google.visualization.ControlWrapper({
            'controlType': 'StringFilter',
            'containerId': 'control1',
            'options': {
                'filterColumnLabel': columnNames.split(',')[0]
            }
        });


        new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker, stringFilter], [table]).draw(data);

        google.visualization.events.addListener(categoryPicker, 'ready', selectHandler);
        function selectHandler() {
            var selection = categoryPicker.getSelection();

            //display table 

        };

        google.visualization.events.addListener(stringFilter, 'ready', selectHandler);
        function selectHandler() {
            var selection = stringFilter.getSelection();

            //display table

        };

    }

请指教。提前致谢。

Answer 1

有几种方法可以解决这个问题。简单的方法是从隐藏表格的容器 div 开始，并在用户第一次与控件交互时取消隐藏它。在创建 Dashboard 对象之前添加此代码：

// create a one-time "ready" event handler for the table
// this fires when the table first draws
google.visualization.events.addOneTimeListener(table, 'ready', function () {
    // create a one-time "ready" event handler for the table that unhides the table
    // this fires when the user first interacts with the controls
    google.visualization.events.addOneTimeListener(table, 'ready', function () {
        document.querySelector('#' + table.getContainerId()).style.display = 'block';
    });
});

我建议仅对表格使用此方法，因为在隐藏的 div 内绘制图表可能会导致其他问题。

更强大的方法（允许您执行其他操作，如数据操作、聚合等）是在仪表板中使用虚拟图表。创建一个新的 ChartWrapper 来保存一个虚拟图表或表格（我个人更喜欢这个表格）：

var dummy = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'DummyTable',
    options: {
        sort: 'disable' // disable sorting on the dummy table to reduce the number of event handlers spawned
    },
    view: {
        rows: [] // remove all rows from the view so it doesn't waste time rendering them in HTML
    }
});

在您的 HTML 中添加一个 div 以包含虚拟对象，并将其隐藏（通过内联样式或 CSS）：

<div id="DummyTable" style="display: none;"></div>

创建一个变量来保存您的 Dashboard 对象：

var dashboard = new google.visualization.Dashboard(document.getElementById('PieChartExample'));

然后为仪表板设置一个“就绪”事件处理程序，为虚拟对象创建“就绪”事件处理程序。当用户与控件交互时，虚拟对象将在重绘后触发“就绪”事件，但在第一次绘制时也会触发一个。您可以使用它来获取真实表格的数据，根据需要进行任何操作/聚合，然后绘制表格：

// create a one-time "ready" event handler for the Dashboard
// this fires when the Dashboard first draws
google.visualization.events.addOneTimeListener(dashboard, 'ready', function () {
    // create a "ready" event handler for the dummy
    // this fires whenever the user interacts with the controls
    google.visualization.events.addOneTimeListener(table, 'ready', function () {
        // get the data for the table
        var dt = dummy.getDataTable();
        // do any manipulation/aggregation here
        // set the table's data
        table.setDataTable(dt);
        // draw the table
        table.draw();
    });
});

更改您的 Dashboard.bind 调用以使用虚拟表而不是真实表：

dashboard.bind([categoryPicker, stringFilter], [dummy]);
dashboard.draw(data);