我非常想学习如何解决这个难题：功能缩放不起作用，我尝试了一切......我不知道该怎么做......我无法弄清楚缺少什么代码。
我想分享一个有效的例子： [http://jsfiddle.net/0wb2zvye/3/][1]
<!DOCTYPE html>
<html lang="en-US">
<html xmlns="https://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="https://www.google.com/jsapi"></script>
<script src="https://apis.google.com/js/platform.js"> {lang: 'en-US'}</script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart', 'controls'],'language': 'en-US'});
</script>
</head>
<style>
</style>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard" style="width:1350px;overflow:scroll;">
Zoom<br />
<input id="lastA" type="button" value="Mon" />
<input id="lastB" type="button" value="Tue" />
<input id="lastC" type="button" value="Wed" />
<input id="lastD" type="button" value="Thu" />
<input id="lastE" type="button" value="Fri" />
<input id="lastF" type="button" value="Sat" />
<input id="lastG" type="button" value="Sun" />
<div id="chart" style="position: relative; width: 1350px; height: 500px;"></div>
<div id="control" style='width: 1350px; height: 50px;'></div>
<div id="filter_div"></div>
</div>
<div id="junk_div" style="display: none;"></div>
<script type="text/javascript">
var data;
var dataTable;
var dashboard;
google.load("visualization", "1", {packages:["controls", "corechart"]});
google.setOnLoadCallback(drawVisualization);
function setupData(){
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {
'columns': [0, 1, 2]
},
'minRangeSize': 1
}
},
// Initial range: 1 to 4.
'state': {'range': {'start': 1, 'end': 50}},
view: {
columns: [{
type: 'number',
calc: function (dt, row) {
return {v: row, f: dt.getFormattedValue(row, 0)};
}
}, 1, 2]
}
});
//then reverse the process in the ChartWrapper's view.columns:
var dateFormatter = new google.visualization.DateFormat({pattern: 'E \nHH:mm', 'textStyle':{'fontSize': 8}});
dateFormatter.format(data, 0);
var chart = new google.visualization.ChartWrapper({
'chartType': 'AreaChart',
'containerId': 'chart',
'options': {
'title':'Wharehouse overwiew',
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'vAxis': {'viewWindowMode':'explicit','viewWindow': {'min': 0},'gridlines': { 'count': 10, 'color': '#d9e2d9' } ,'textStyle':{'fontSize': 11}},
'legend': { 'position': 'top', 'alignment': 'start' },
'hAxis': {'format': 'E /nHH:mm','textStyle':{'fontSize': 8},'minTextSpacing': 0, 'slantedText': false},
'tooltip': { 'textStyle': { 'fontName': 'verdana', 'fontSize': 10, 'color': '#2d862d' } },
'series': {
0: { 'areaOpacity': 0.1},
1: { 'areaOpacity': 0.1}
}
// 'trendlines': {0: {'color': 'black','lineWidth': 3,'opacity': 0.4 }}
// hAxis: { 'minTextSpacing': 0, 'showTextEvery': 1, slantedText: true }
},
view: {
columns: [{
type: 'string',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return dt.getFormattedValue(row, 0);
}
}, 1, 2]
}
});
console.log('label: ' + data.getColumnLabel(0));
var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
dashboard.bind(control, chart).bind(filter, control);
dashboard.draw(data);
function zoomLastA () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1),
end: range.max
}
});
control.draw();
}
function zoomLastB () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 2),
end: range.max
}
});
control.draw();
}
function zoomLastC () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() -3),
end: range.max
}
});
control.draw();
}
function zoomLastD () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() -4),
end: range.max
}
});
control.draw();
}
function zoomLastE () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() -5),
end: range.max
}
});
control.draw();
}
function zoomLastF () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() -6),
end: range.max
}
});
control.draw();
}
function zoomLastG () {
var range = data.getColumnRange(0);
control.setState({
range: {
start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() -7),
end: range.max
}
});
control.draw();
}
var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {
google.visualization.events.removeListener(runOnce);
if (document.addEventListener) {
document.querySelector('#lastA').addEventListener('click', zoomLastA);
document.querySelector('#lastB').addEventListener('click', zoomLastB);
document.querySelector('#lastC').addEventListener('click', zoomLastC);
document.querySelector('#lastD').addEventListener('click', zoomLastD);
document.querySelector('#lastE').addEventListener('click', zoomLastE);
document.querySelector('#lastF').addEventListener('click', zoomLastF);
document.querySelector('#lastG').addEventListener('click', zoomLastG);
}
else if (document.attachEvent) {
document.querySelector('#lastA').attachEvent('onclick', zoomLastA);
document.querySelector('#lastB').attachEvent('onclick', zoomLastB);
document.querySelector('#lastC').attachEvent('onclick', zoomLastC);
document.querySelector('#lastD').attachEvent('onclick', zoomLastD);
document.querySelector('#lastE').attachEvent('onclick', zoomLastE);
document.querySelector('#lastF').attachEvent('onclick', zoomLastF);
document.querySelector('#lastG').attachEvent('onclick', zoomLastG);
}
else {
document.querySelector('#lastA').onclick = zoomLastA;
document.querySelector('#lastB').onclick = zoomLastB;
document.querySelector('#lastC').onclick = zoomLastC;
document.querySelector('#lastD').onclick = zoomLastD;
document.querySelector('#lastE').onclick = zoomLastE;
document.querySelector('#lastF').onclick = zoomLastF;
document.querySelector('#lastG').onclick = zoomLastG;
}
});
}
function drawVisualization() {
dataTable = new google.visualization.DataTable();
dashboard = new google.visualization.Dashboard(document.getElementById('#dashboard'));