我试图让 google gauge pointer 移动,但它没有移动,我已经设置了动画配置,因为它应该在 var options 中设置,例如 duration : 1000 和 easing: 'inAndOut' ,我是 n00b in Google API 所以为了我的无知尝试。
谁能帮帮我。 这是 tutorial link我正在使用它。代码正在工作,但部分工作,仪表指针应该缓慢移动到它的最大值,但是,在我的情况下它不会工作。 这是代码。
<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Match',80],
]);
var options = {
width: 440, height: 140,
greenFrom: 70, greenTo: 100,
yellowFrom:50, yellowTo: 70,
redFrom:0, redTo: 50,
minorTicks: 5,
animation:{
duration: 1000,
easing: 'inAndOut',
},
majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
chart.draw(data, options);
clearChart();
}
</script>
</html>
最佳答案
原来是我自己想出来的,在谷歌论坛上有一个很好的答案here
诀窍是以 0(或任何最小值)开始测量,然后稍后更新该值(使用 setInterval() 或任何其他方法)
肯定有更好的方法来更新值,而不是仅仅编写一个新数组,但你明白了。
<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Match',0],
]);
var options = {
width: 440, height: 140,
greenFrom: 70, greenTo: 100,
yellowFrom:50, yellowTo: 70,
redFrom:0, redTo: 50,
minorTicks: 5,
animation:{
duration: 1000,
easing: 'inAndOut',
},
majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
chart.draw(data, options);
clearChart();
// This is new.
setTimeout(function(){
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Match',80],
]);
chart.draw(data, options);
}, 200);
}
</script>
</html>
关于javascript - 谷歌 API : gauge animation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11349284/