这里我有一个非常强大的Google桌面控件:http://jsbin.com/IhEmetI/1/edit
和CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'Name',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 3]}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table], [stringFilter, table]).
// Draw the entire dashboard.
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
<div id="control4"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div>
<div style="float: left;" id="chart4"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
但是我无法显示stringFilter,所以按名称搜索列...这段代码有什么问题:
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'Name',
'ui': {'labelStacking': 'vertical'}
}
});
和HTML:
<div id="control3"></div>
所以有基本的谷歌可视化表和控制图使用,我需要按名称过滤列,但不工作。究竟是什么问题?
答案 0 :(得分:1)
您对Dashboard#bind
的电话格式不正确。如果要将控件绑定到PieChart和Table,则需要像下面这样指定:
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// bind the NumberRangeFilter, CategoryFilter, and StringFilter to the PieChart and Table
bind([slider, categoryPicker, stringFilter], [pie, table]).
// Draw the entire dashboard.
draw(data);
如果希望StringFilter仅控制表,则需要像下面这样指定它:
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// bind the NumberRangeFilter and CategoryFilter to the PieChart and Table
bind([slider, categoryPicker], [pie, table]).
// bind the StringFilter to the Table
bind([stringFilter], [table]).
// Draw the entire dashboard.
draw(data);
[修改 - 正确设置 cssClassNames
选项的代码]
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart2',
options: {
cssClassNames: cssClassNames,
allowHtml: true
}
});