我正在使用Google Visualization API在我正在构建的网站上绘制一些数据。在我的实际网站上，它是一个非常复杂的自动生成的绘图和控件的排列，但即使使用API文档演示中使用的非常简单的仪表板，这个问题也是可见的。
NumberRangeFilter控件绑定到Dashboard。控件的下滑块手柄（lowValue）设置为大于最小值的值，上滑块手柄（highValue）不会更改其默认值（即最大值） ）。
如果使用dashboard.draw(data)重绘仪表板，则范围过滤器控件会将其范围重置为0（即低值和高值均为0）。如果没有数据点为0，这当然会隐藏所有数据。
以下是问题的演示。单击设置滑块范围或手动调整滑块以使低值大于0，并且高值不变。然后单击重绘图表。您将看到滑块重新调整为0-0范围。
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
var data;
var dashboard;
var donutRangeSlider;
var colChart;
function drawDashboard() {
// Create our data table.
data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten', 'Calories eaten (*100)'],
['Michael' , 5, 15],
['Elisa', 7, 30],
['Robert', 3, 10],
['John', 2, 70],
['Jessica', 6, 18],
['Aaron', 1, 2],
['Margareth', 8, 40]
]);
// Create a dashboard.
dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten',
'minValue': 0
}
});
// Create a column chart, passing some options
colChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
'width': 500,
'height': 300,
'legend': 'right'
}
});
// Establish dependencies, declaring that 'filter' drives 'columnChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, colChart);
// Draw the dashboard.
dashboard.draw(data);
}
function setRange() {
donutRangeSlider.setState({'lowValue': 1, 'highValue': 8});
donutRangeSlider.draw();
}
function redrawDashboard() {
dashboard.draw(data);
}<script type='text/javascript' src="https://www.google.com/jsapi"></script>
<p>
<button onclick="setRange()">Set slider range</button>
<button onclick="redrawDashboard()">Redraw Dashboard</button>
</p>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
据我所知，这是API中的一个直接错误（以及Google Visualization API的错误跟踪器的I have reported it），但也许我错过了一些东西。有办法避免这种情况吗？如果它是API中的错误，是否有任何简单的方法可以在重新绘制仪表板之前保存滑块状态，然后在重新绘制仪表板后恢复它？
我尝试存储控件状态，重绘，然后设置事件监听器以在重绘完成后恢复控制状态。但是，这似乎并不合适。如果我手动存储控件状态，重绘，然后看到重绘完成后恢复状态，它的工作原理。但是，使用触发事件时，恢复状态不会停留。 ＆＃34;重绘（解决方法）＆＃34;功能执行以下操作：
ready活动
// Load the Visualization API and the controls package.
google.load('visualization', '1.1', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
var data;
var dashboard;
var donutRangeSlider;
var colChart;
function drawDashboard() {
// Create our data table.
data = google.visualization.arrayToDataTable([
['Name', 'Donuts eaten', 'Calories eaten'],
['Michael' , 5, 15],
['Elisa', 7, 30],
['Robert', 3, 10],
['John', 2, 70],
['Jessica', 6, 18],
['Aaron', 1, 2],
['Margareth', 8, 40]
]);
// Create a dashboard.
dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten',
'minValue': 0
}
});
// Create a pie chart, passing some options
colChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
'width': 500,
'height': 300,
'legend': 'right'
}
});
// Establish dependencies, declaring that 'filter' drives 'colChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, colChart);
// Draw the dashboard.
dashboard.draw(data);
}
function setRange() {
donutRangeSlider.setState({'lowValue': 1, 'highValue': 8});
donutRangeSlider.draw();
}
function redrawDashboard() {
dashboard.draw(data);
}
function alternateRedraw() {
console.log("Redrawing");
var controlState = donutRangeSlider.getState();
google.visualization.events.addOneTimeListener(dashboard,'ready',function(e){fixSlider(controlState)});
dashboard.draw(data);
}
function fixSlider(state) {
console.log('Post draw event');
donutRangeSlider.setState(state);
donutRangeSlider.draw();
}<script type='text/javascript' src="https://www.google.com/jsapi"></script>
<p><button onclick="setRange()">Set slider range</button> <br/>
<button onclick="redrawDashboard()">Redraw Dashboard</button>
<button onclick="alternateRedraw()">Redraw (workaround)</button>
</p>
<!--Div that will hold the dashboard-->
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>