zoukankan      html  css  js  c++  java
  • 柱状饼状统计图表的Flash实现

        很多朋友经常需要在网页上表现一些数据的统计图表,特别是投票统计系统的应用开发,通常情况下,是先用一些软件画出图表,然后转换成GIF或JPEG格式保存,再用img标记插入网页中,或者使用CSS的方式。这些图片常常会占去网页本身大小的很大比例,影响到网页的传输速度,并且显现出来的并不是那么的美观。

      常接触统计图表的开发人员会注意到,很多图表其实是比较简单,比如横向柱状的统计图,就是由简单的矩形块拼合。这自然会让人们联想到Html中的表格,所以,有不少这些类型的统计图,直接用表格来实现,比如下面:

       这种用Html代替图片的做法,比较简单,显然要比任何图片的方式都要少占用带宽资源。不过,表格的方法对于饼状图和柱状图显得就那么点无能为力了。

       这样的统计图表应该可以使用Flash的方式就可以简单完美的实现,而且有3D效果,如下图:

    柱状图效果

    饼状图效果

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="273" height="185" name="chart" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="flashVars" value='w=273&h=185&xml=<root caption="" xRight="" xLeft="" boo="1" ><date title=""><category label="满意" /><category label="基本满意" /><category label="不满意" /></date><items title=""><item value="1" info="满意" /><item value="2" info="基本满意" /><item value="3" info="不满意" /></items></root>' />
    <param name="movie" value="column.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="column.swf" quality="high" bgcolor="#ffffff" width="273" height="185" name="chart" align="middle" flashVars='w=273&h=185&xml=<root caption="" xRight="" xLeft="" boo="1" ><date title=""><category label="满意" /><category label="基本满意" /><category label="不满意" /></date><items title=""><item value="1" info="满意" /><item value="2" info="基本满意" /><item value="3" info="不满意" /></items></root>' allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    </object>

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="650" height="185" name="chart" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="flashVars" value='w=650&h=185&xml=<root caption="" boo="1" ><item label="满意" value="1" /><item label="基本满意" value="2" /><item label="不满意" value="3" /></root>' />
    <param name="movie" value="pie.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="wmode" value="transparent" />
    <embed src="pie.swf" quality="high" flashVars='w=693&h=185&xml=<root caption="" boo="1" ><item label="满意" value="1" /><item label="基本满意" value="2" /><item label="不满意" value="3" /></root>' bgcolor="#ffffff" width="650" height="185" name="chart" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    </object>

    在方配网站管理系统中已集成了这一插件,位置在plugins\charts下,代码也很简单,请下载自己测试吧。

    下载地址:http://www.fangpage.com/tools/attchemnt.aspx?aid=38

    方配软件(http://www.fangpage.com)
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 数的统计
    Java实现 蓝桥杯VIP 算法训练 和为T
    Java实现 蓝桥杯VIP 算法训练 友好数
    Java实现 蓝桥杯VIP 算法训练 连续正整数的和
    Java实现 蓝桥杯VIP 算法训练 寂寞的数
    Java实现 蓝桥杯VIP 算法训练 学做菜
    Java实现 蓝桥杯VIP 算法训练 暗恋
    Java实现 蓝桥杯VIP 算法训练 暗恋
    测试鼠标是否在窗口内,以及测试鼠标是否在窗口停留
    RichEdit 各个版本介绍
  • 原文地址:https://www.cnblogs.com/fangpage/p/fpcharts.html
Copyright © 2011-2022 走看看