【问题标题】:How do I animate the numerical value using a Google Charts animation? Specifically the Gauage如何使用 Google Charts 动画为数值设置动画?特别是仪表
【发布时间】:2016-07-21 09:27:56
【问题描述】:

在这个 JS Fiddle 示例中,仪表会定期更新为新值。

https://jsfiddle.net/n5fvb8ft/ (感谢nbering的更正)

此示例使用 setInterval 分配随机新值 例如

setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);

如您所见,新数字出现并且指针朝它移动。 我真的很想用指针显示当前数字,而不仅仅是显示最终值。这可以使用谷歌图表吗?我也想放慢动画速度,但这可能是另一个问题。

我想可能会在值上设置一个补间并以与针动画相同的持续时间对其进行动画处理,然后反复更新仪表,但这会非常笨拙,并且针可能会在很多小动作中进行动画处理。当然,尽管必须有更好的方法。

任何帮助将不胜感激。

【问题讨论】:

  • 你刚刚链接到一个空白的小提琴,你已经编好了一个吗?
  • 他可能是想链接这个:jsfiddle.net/n5fvb8ft
  • 感谢 nbering。我已经更新了问题。

标签: javascript animation google-visualization google-gauges


【解决方案1】:

据我了解,您希望径向仪表内出现的数字显示指针指向的值,而不是指针动画指向的值。

如果是这样,那么不,这不是 Google Charts API 的可用功能。您可能可以按照您的建议破解它,但这可能不会像您希望的那样表现得那么好,并且会涉及很多 setTimeouts。因此,如果您有任何其他长时间运行的代码阻塞了事件循环,您会得到抖动的动画。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-01-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-01
    • 1970-01-01
    相关资源
    最近更新 更多