JSSAY'S BLOG » Flex http://www.jssay.com/blog 关注Java, Linux, 互联网, SEO, Wordpress, Jquery, Web前端 Fri, 30 Sep 2011 09:13:42 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 用flex代码实现的Google Finance Chart http://www.jssay.com/blog/index.php/2010/09/13/%e7%94%a8flex%e4%bb%a3%e7%a0%81%e5%ae%9e%e7%8e%b0%e7%9a%84google-finance-chart/ http://www.jssay.com/blog/index.php/2010/09/13/%e7%94%a8flex%e4%bb%a3%e7%a0%81%e5%ae%9e%e7%8e%b0%e7%9a%84google-finance-chart/#comments Mon, 13 Sep 2010 15:07:15 +0000 jssay http://www.jssay.com/blog/?p=1107 最近项目中有需要用到类似Google的Finance Chart效果，尤其是要求在某个特定时间点加上一个小旗,如图所示：
Google Finance Chart

Google Finance Chart

Google威武，Google开发的这个组件打开速度非常快,用户体验也非常好，可惜没提供源码。

在网上搜了一下，也有不少的开源组件提供类似的功能。现将其中几个贴出来参考一下：
1. http://mycolorway.com/blog/demo/SlideChart/
这个虽然做的有点粗糙，但是里面的源代码还是有一定的参考价值，如果你是一个新手，从这里可以上路。

2. http://www.riafan.com/flex/finance/
这是我以前一个同事做的，虽然功能上还有待完善，但是性能及用户体验上还是不错的。

3. http://meutzner.com/blog/index.cfm/2007/8/14/Google-Finance-with-Flex-Code
它提供了五个版本的chart，由简单到复杂，最终非常接近Google的Finance Chart效果。

Step 1  Step 2  Step 3  Step 4  Step 5

4. Yahoo Finance Chart
这个就不用多说了，但是看惯了Google的，再来看Yahoo的感觉有点奇怪。

本文地址：http://www.jssay.com/blog/index.php/2010/09/13/用flex代码实现的google-finance-chart/

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明： 转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2010/09/13/%e7%94%a8flex%e4%bb%a3%e7%a0%81%e5%ae%9e%e7%8e%b0%e7%9a%84google-finance-chart/


相关文章

]]> http://www.jssay.com/blog/index.php/2010/09/13/%e7%94%a8flex%e4%bb%a3%e7%a0%81%e5%ae%9e%e7%8e%b0%e7%9a%84google-finance-chart/feed/ 0 Look at these lovely fishes http://www.jssay.com/blog/index.php/2009/10/18/look-at-these-lovely-fishes/ http://www.jssay.com/blog/index.php/2009/10/18/look-at-these-lovely-fishes/#comments Sat, 17 Oct 2009 16:36:42 +0000 jssay http://www.jssay.com/blog/?p=113 I Just found an interesting flash as below. if you move your mouse, these fishes will shift by following your mouse. and if you click any field of the scene, just like putting food there, these fishes will rush to get food and eat up all the food. if you are a flash designeror a flex expert, how did you make the flash? do you have any ideas about this?

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明： 转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2009/10/18/look-at-these-lovely-fishes/


相关文章

]]> http://www.jssay.com/blog/index.php/2009/10/18/look-at-these-lovely-fishes/feed/ 2 如何解决Div层被Applet遮住问题 http://www.jssay.com/blog/index.php/2009/10/17/%e5%a6%82%e4%bd%95%e8%a7%a3%e5%86%b3div%e5%b1%82%e8%a2%abapplet%e9%81%ae%e4%bd%8f%e9%97%ae%e9%a2%98/ http://www.jssay.com/blog/index.php/2009/10/17/%e5%a6%82%e4%bd%95%e8%a7%a3%e5%86%b3div%e5%b1%82%e8%a2%abapplet%e9%81%ae%e4%bd%8f%e9%97%ae%e9%a2%98/#comments Fri, 16 Oct 2009 16:39:48 +0000 jssay http://www.jssay.com/blog/index.php/2009/10/17/%e5%a6%82%e4%bd%95%e8%a7%a3%e5%86%b3div%e5%b1%82%e8%a2%abapplet%e9%81%ae%e4%bd%8f%e9%97%ae%e9%a2%98/ 前段时间遇到一个task，内容大致是这样的：

有一个flex做的组件，能够根据配置文件，数据文件和样式文件来动态显示我们的数据。其UI类似一个table，有标题栏和数据栏。且不说这个组件如何难实现。我的任务是要在鼠标移至这个控件的每一个单元格时，弹出一个div层，用来显示与此单元格有关的数据。

要弹出一个div层并不难，因为flex是支持javascript的function调用的，难点有二，一是鼠标定位，我要让弹出的window不偏不移地显示在鼠标正下方，因为是在flex组件上定位不同于在纯HTML中定位，最后的解决办法是：在flex内部计算出每个单元格的左上角的顶点坐标和单元格的高度，因为这个高度只是相对flex组件的，我还需要求出这个flex组件的左上角顶点坐标，然后我才能得出每个单元格左下角定点的坐标，进而确定弹出窗口的位置。二是要求这个弹出窗口有半透明边框，有点模糊却能看到后面的内容。找了个web designer画一个，用的是PNG格式，一开始始终不能用，在fireforks和photoshop里是透明的，但是到网页上却没有了透明效果，最后发现用GIF格式的图片可以，如果用PNG格式的话必须用8位的，而24位和32位都不行。

这两个问题解决了，我以为彻底解放了，试了试效果还挺不错。但是当我点到最后一行的某个单元格时，发现弹出窗口的下半部分被遮住了，十分难看。原因是我们做的这个网站包含了好几个组件，这个flex组件的下面是一个Applet。而我们的div层就这样被Applet无情地遮住了。

我试了div标签的z-index属性，把这个值设的很高很低都不行。然后上网查资料说Applet的层级是最高的，要想不被Applet遮住，有几个办法，一个是用iframe,另一个就是把弹出的窗口也做成flex，我采用了第一个方法，把弹出的窗口做成了一个iframe.确实被Applet遮住的问题解决了，心里暗爽了一把，但是很快又发现透明边框没有了，原来整个弹出窗口被包含进iframe之后，尽管iframe是可以设置成透明效果的，但是一旦这么做，弹出窗口上面的内容就又都没有了，这个方法被实践证明行不通。如果用透明边框包住一个iframe呢，结果透明边框有了，内容也没有丢失，但事最下面一行的最下面部分的透明边框被遮住了一部分。虽然相比前面的方法有显著的改善，但是还是没有达到目的。

最后我们小组讨论了很多方案，有说把弹出窗口用flex 实现的，有说把下面的Applet也换成flex组件，也有人建议把下面的Applet移走。我倒是有一个想法，就是当我检测到向下弹出窗口而位置不足时，我就向上弹出窗口。但是这个窗口的大小事要随着内容的大小而自适应大小的，我很难取到准确的高度和顶点坐标，结果这一想法也被否定了。

最后还是客户妥协，认为只有极少一部分透明边框被遮住是可以接受的。听到这个消息后，我不知道是该高兴呢还是伤心。本来我可以放下这个包袱去做更重要的事情，但是我是一个完美主义者，这点缺憾是我内心深处所不允许的，所以直到现在我还一直关心这件事，希望有类似经验的人看到我的这篇文章之后，能给我指点迷津。就当时抛砖引玉吧。。。。

本Blog文章除特别声明之外皆为原创文章，欢迎转载，转载请注明： 转载自JSSAY'S BLOG

本文链接地址: http://www.jssay.com/blog/index.php/2009/10/17/%e5%a6%82%e4%bd%95%e8%a7%a3%e5%86%b3div%e5%b1%82%e8%a2%abapplet%e9%81%ae%e4%bd%8f%e9%97%ae%e9%a2%98/


相关文章

]]> http://www.jssay.com/blog/index.php/2009/10/17/%e5%a6%82%e4%bd%95%e8%a7%a3%e5%86%b3div%e5%b1%82%e8%a2%abapplet%e9%81%ae%e4%bd%8f%e9%97%ae%e9%a2%98/feed/ 1