Question

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

我不确定，如果我应该使用（就绪事件）或（选择事件），则触发此行为。我在网上找不到任何使用控件渲染图表/表格的例子。如果有人能提供一些指导或示例，那将非常感激。我已经开始声明目前为止的侦听器事件，在下面的代码中：

  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开始，并在用户第一次与控件交互时取消隐藏它。在创建仪表板对象之前添加此代码：

// 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'));

然后设置＆＃34;准备好＆＃34;用于创建＆＃34; ready＆＃34;的仪表板的事件处理程序假人的事件处理程序。假人将准备好＆＃34;准备好＆＃34;当用户与控件交互时重绘它的事件，但在第一次绘制时也会触发一个事件。您可以使用它来获取真实表的数据，根据需要进行任何操作/聚合，并绘制表格：

// 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);

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

1 个答案: