今天把web日志分析的日报表修改了一下,忽然想把诸分网站的月/日报表用比较流行的flash图表方式做出来,把yahoo统计的copy过来试了下很多调整的参数不太熟悉,就上网找了一下有关的软件。这个比较容易上手,fusion charts。
fusion charts是一个商业的flash图表软件,但是提供free版本的下载。
一般使用fusioncharts需要两个基本文件,一个是js库FusionCharts.js,另一个是图表swf文件,如FCF_Column3D.swf等,根据需要的图样不同选择不同的swf文件。
在使用上也很简单,首先调用js基本库文件。
<SCRIPT LANGUAGE="Javascript" xsrc="FusionCharts.js"></SCRIPT>
然后显示flash如表。
<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("FCF_Column3D.swf", "chart1Id", "400", "300", "0", "1");
chart1.setDataXML("<graph showValues='0'><set name='Aaaa' value='50000' color='D64646' /><set name='B' value='65435' color='AFD8F8' hoverText='bone1' /></graph>");
chart1.render("chart1div");
</script>
其中<graph></graph>定义的是图表属性,每个swf对于的参数不一定相同,这里是针对FCF_Column3D.swf常用的有以下一些:
showValues='0' 默认不显示柱的值
bgColor=“” 设置背景色
caption="String" 设置标题
subCaption="String" 设置副标题
xAxisName= "String" 设置X轴标题
yAxisName= "String" 设置Y轴标题
baseFontSize="FontSize" 图表字体大小
decimalPrecision="2" 值精确到小数点2位
numberPrefix="$" 值首添加$符号
<set name=“” value="" color="" />定义显示的数值,name定义的每个值的名称,value定义的是值,color定义每柱的颜色。还有一些其他的属性。
hoverText=“String” 定义每柱的说明
link="URL" 定义每柱的链接
showName="1" 定义是否默认在每柱上显示数值的名称
FusionCharts的种类很多,显示功能还是很强大的,包括多数据、饼状、上下曲线等,说明文档中有更详细的用法。