谷歌财务放大缩小图逻辑

时间:2013-10-20 01:09:15

标签: javascript html css ajax

我正在寻找谷歌金融等可缩放图形背后的逻辑。我知道那里 是现成的组件,只是这样做,但我正在寻找一个基本的 解释逻辑的例子。

2 个答案:

答案 0 :(得分:1)

任何写这样的东西的人基本上都有两种选择。

  1. 加载大量数据,只显示一点点。当用户更改缩放时,请使用之前未显示的数据。基本上,我们在页面加载时加载所有数据,因此Javascript可以在以后使用它。这更容易编写,但速度慢;有时,您必须加载数据才能完成。

  2. 仅加载您需要的数据。当用户与页面交互时,将AJAX请求发送回服务器,以加载您需要的新数据。

  3. 2a上。当您加载新数据时,存储到目前为止已加载的所有内容,这样如果它们返回到较旧的缩放设置,您就不需要发出更多的AJAX请求。

    1 + 2.仅加载您需要的数据,然后显示页面。然后立即加载其他所有内容,但除非他们更改缩放设置,否则不要显示它。

    其中,2和2a可能是最佳选择,而#1则是“快速完成”。

答案 1 :(得分:1)

Google Chrome(以及基于Chrome的浏览器)拥有开发人员工具,其网络功能可让您了解会发生什么。

加载报价然后更改缩放时,您将看到新的数据请求。例如:

https://www.google.com/finance/getprices?q=AA&x=NYSE&i=1800&p=30d&f=d,c,v,o,h,l&df=cpct&auto=1&ts=1382233772497

它为每个“缩放级别”发出新请求,这是必要的,因为较大的时间窗口(1年,5年)将以较粗粒度显示数据(分别为1天,1周)