如何将侦听器事件添加到控件 [英] How to add listener event to controls
问题描述
我试图弄清楚如何获取控件([categoryPicker，stringFilter])，触发绘制表格，而不是在页面加载时自行加载表格.
I am trying to figure out how I can get the controls ([categoryPicker, stringFilter]), trigger to draw table, instead of table loading by itself when the page loads.
我不太确定是否应该使用(就绪事件)或(选择事件)来触发此行为.我找不到在线使用控件渲染图表/表格的任何示例.如果有人可以提供一些指导或示例，将不胜感激.到目前为止，我在下面的代码中声明了侦听器事件:
I am little unsure, if I should be using (ready event) or (select event), to trigger this behavior. I could not find any examples online for rendering charts/table using controls. if anyone could provide some guide or example, that would be very much appreciated. I have started by declaring the listener events so far, in the code below:
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
};
}
请告知.提前致谢.
推荐答案
有几种方法可以解决此问题.一种简单的方法是从隐藏表的容器div开始，并在用户首次与控件进行交互时取消隐藏它.在创建仪表板对象之前，请添加以下代码:
There are a few ways you can handle this. The simple way is to start with the Table's container div hidden, and unhide it when the user first interacts with the controls. Add this code before you create your Dashboard object:
// 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中绘制图表可能会导致其他问题.
I recommend this method only for Tables, as drawing charts inside hidden divs can result in other problems.
一种更强大的方法(允许您执行其他操作，如数据操作，聚合等)是在仪表板中使用虚拟图表.创建一个新的ChartWrapper来保存一个虚拟图表或表格(个人而言，我更喜欢使用此表格):
A more powerful way (which allows you to do other things like data manipulation, aggregation, etc) is to use a dummy chart in the Dashboard. Create a new ChartWrapper to hold a dummy chart or table (personally, I prefer tables for this):
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):
Add a div to your HTML to contain the dummy, and hide it (either via inline style or CSS):
<div id="DummyTable" style="display: none;"></div>
创建一个变量来保存您的Dashboard对象:
Create a variable to hold your Dashboard object:
var dashboard = new google.visualization.Dashboard(document.getElementById('PieChartExample'));
然后为仪表板设置一个就绪"事件处理程序，为假人创建就绪"事件处理程序.当用户与控件交互时，虚拟对象在重绘后将触发就绪"事件，但在首次绘制时也会触发一个就绪"事件.您可以使用它来获取真实表的数据，根据需要进行任何操作/汇总，然后绘制表:
Then set up a "ready" event handler for the Dashboard that creates "ready" event handlers for the dummy. The dummy will fire a "ready" event after it is redrawn when the user interacts with the controls, but will also fire one when it is first drawn. You can use this to fetch the data for your real table, do any manipulation/aggregation if required, and draw the table:
// 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调用以使用虚拟表代替实际表:
Change your Dashboard.bind call to use the dummy instead of the real table:
dashboard.bind([categoryPicker, stringFilter], [dummy]);
dashboard.draw(data);
这篇关于如何将侦听器事件添加到控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
