html Google Charts仪表板设置，其中多个数据表用于为单个“逻辑”仪表板供电。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Google Charts仪表板设置，其中多个数据表用于为单个“逻辑”仪表板供电。相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
control1 = createDashboard1();
control2 = createDashboard2();
google.visualization.events.addListener(control1, 'statechange', function() {
control2.setState(control1.getState());
control2.draw();
});
}
function createDashboard1() {
// Prepare the data.
var data = google.visualization.arrayToDataTable([
['Name', 'Age'],
['Michael' , 12],
['Elisa', 20],
['Robert', 7],
['John', 54],
['Jessica', 22],
['Aaron', 3],
['Margareth', 42],
['Miranda', 33]
]);
// Define a StringFilter control for the 'Name' column
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Name'
}
});
// Define a table visualization
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart1',
'options': {'height': '13em', 'width': '20em'}
});
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the string filter to affect the table contents
bind(stringFilter, table).
// Draw the dashboard
draw(data);
return stringFilter;
}
function createDashboard2() {
// Prepare the data.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Calories'],
['Apple' , 12],
['Banana', 20],
['Kiwi', 7],
['Peach', 54],
['Watermelon', 22],
['Raspberry', 3],
['Strawberry', 42],
['Orange', 33]
]);
// Define a StringFilter control for the 'Name' column
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Fruit'
}
});
// Define a table visualization
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {'height': '13em', 'width': '20em'}
});
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the string filter to affect the table contents
bind(stringFilter, table).
// Draw the dashboard
draw(data);
return stringFilter;
}
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" style="display:none"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
以上是关于html Google Charts仪表板设置，其中多个数据表用于为单个“逻辑”仪表板供电。的主要内容，如果未能解决你的问题，请参考以下文章
Google Charts interpolateNulls无效