谷歌 API :仪表动画
Google API : gauge animation
我正在尝试使谷歌仪表指针移动,但它没有移动,我已经设置了动画配置,因为它应该在var选项中设置,例如持续时间:1000和缓动:"inAndOut",我在谷歌API中是n00b,所以给我的无知尝试。
谁能帮我。这是我正在使用它的教程链接。代码正在工作,但部分地,仪表指针应该缓慢移动到最大值,但是,就我而言,它不起作用。这是代码。
<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>
事实证明,我自己想通了这个,这里的谷歌论坛有一个很好的答案
诀窍是用 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>
不确定这现在是否会帮助任何人,但我发现使用 setValue 方法将我从静态针移动到动画针。下面是一个代码片段(我有许多仪表小部件,因此是数组)。
// set up the value here that we are moving from - this allows the gauge needle to animate when we set the actual value later
if (!widgetArray[i].googleArrayToDataTable) { // check if we've initialised
widgetArray[i].googleArrayToDataTable = new google.visualization.arrayToDataTable([
['Label', 'Value'],
[widgetArray[i].label, 0]
]);
}
else {
widgetArray[i].googleArrayToDataTable = google.visualization.arrayToDataTable([
['Label', 'Value'],
[widgetArray[i].label, (widgetArray[i].googleOldNeedleValue * widgetArray[i].dialMax / widgetArray[i].googleOldDialMax)]
]);
}
// remember these values - I need to do this for my application to ensure the needle looks ok when switching values
widgetArray[i].googleOldNeedleValue = widgetArray[i].needleVal;
widgetArray[i].googleOldDialMax = widgetArray[i].dialMax;
majorTickIncrement = widgetArray[i].dialMax / 5;
var options;
if (widgetArray[i].range2End > 0)
options = {
height: 240,
animation: { duration: 1000, easing: 'inAndOut' },
//redFrom: 0, redTo: KRAvalues.targetVal,
redFrom: 0, redTo: widgetArray[i].range1End,
yellowFrom: widgetArray[i].range1End, yellowTo: widgetArray[i].range2End,
greenFrom: widgetArray[i].range2End, greenTo: widgetArray[i].range3End,
minorTicks: 5, max: widgetArray[i].dialMax,
majorTicks: ['0', majorTickIncrement, majorTickIncrement * 2, majorTickIncrement * 3, majorTickIncrement * 4, widgetArray[i].dialMax]
};
else
options = {
height: 240,
animation: { duration: 1000, easing: 'inAndOut' },
minorTicks: 5, max: widgetArray[i].dialMax,
majorTicks: ['0', majorTickIncrement, majorTickIncrement * 2, majorTickIncrement * 3, majorTickIncrement * 4, widgetArray[i].dialMax]
};
if (!widgetArray[i].googleChart) { // initialise gauge if required
widgetArray[i].googleChart = new google.visualization.Gauge(document.getElementById(widgetArray[i].name + 'chart_div'));
}
// this animates the needle
// draw old value
widgetArray[i].googleChart.draw(widgetArray[i].googleArrayToDataTable, options);
// set new value
widgetArray[i].googleArrayToDataTable.setValue(0, 1, widgetArray[i].needleVal);
// draw new value
widgetArray[i].googleChart.draw(widgetArray[i].googleArrayToDataTable, options);
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 如何使用jQuery在动画中期加速动画
- 使用数据上的角度更改设置集合的第一个元素的动画
- 如何使用css动画/javascript使具有背景图像的元素出现
- 如何使用css动画从中心增加边界线
- JQuery动画延长容器不起作用
- 动画CSS进度条
- JavaScript动画从不执行
- 使用javascript的半仪表/速度表动画
- 谷歌 API :仪表动画
- 如何设置与增加/减少值相关的仪表动画