open-flash-chart2系列教程.doc

open-flash-chart2系列教程年底了，公司要统计销售数据，于是就找了几个开源免费的chart程序来研究，PHP/SWF Charts 和 FusionCharts Free，不过最终还是选择了Open Flash Char，官方提供了很多实例，而做订单的销售统计并不需要多么花哨的东西，OFC2的功能也已经足够强大了。2.0的版本数据格式完全用json来处理，非常灵活，官方提供了各种接口程序，包括PHP/PHP5、Pear、Python、Java、Dotnet，调用很简单swfobject.embedSWF( “open-flash-chart.swf”, “my_chart”, “550, “200, “9.0.0, “expressInstall.swf”, ”data-file”:”data.txt” );Hello World数据文件格式如下： “y_legend”: “text”: “Time of day”, “style”: “color: #736AFF;” ,“elements”: type: line, colour: #736AFF, text: Avg. wave height (cm), font-size: 10, width: 2, dot-size: 4, halo-size: 0, values : 1.5,1.69,1.88,2.06,2.21,2.34,2.43,2.48,2.49,2.47,2.40,2.30,2.17,2.01,1.83,1.64,1.44,1.24,1.05,0.88,0.74,0.62,0.54,0.50,0.50,0.54,0.61,0.72,0.86,1.03,1.22,1.41,1.61,1.81,1.99,2.15,2.29,2.39,2.46,2.49,2.48,value:2.44,colour:#FF0000,tip:monkies,2.35,2.23,2.08 , “x_axis”: “labels”: “rotate”: “vertical”, “labels”:2:00am % ?,2:10,2:20,2:30,2:40,2:50, 3:00am,3:10,3:20,3:30,3:40,3:50, 4:00am,4:10,4:20,4:30,4:40,4:50, 5:00am,5:10,5:20,5:30,5:40,5:50, 6:00am,6:10,6:20,6:30,6:40,6:50, 7:00am,7:10,7:20,7:30,7:40,7:50, 8:00am,8:10,8:20,8:30,8:40,8:50, 9:00am,9:10,9:20 ,“y_axis”: “max”: 3 数据放在data.txt里，演示上一节提到open-flash-chart2的数据是通过存储在txt文件中，然后通过类似那个http:/yoururl/chart.html?ofc=datafile.txt 这样的形式来加载不同的数据，当然ofc后面的参数可以是php文件，php类库的使用将在以后的教程中出现，本节将讨论使用js加载数据的另一种方法，代码如下：是swfobject.embedSWF(open-flash-chart.swf, my_chart, 350, 200, 9.0.0);function ofc_ready()alert(ofc_ready);function open_flash_chart_data()alert( reading data );return JSON.stringify(data);function findSWF(movieName) if (navigator.appName.indexOf(Microsoft)!= -1) return windowmovieName; else return documentmovieName; var data = “elements”: type: bar, text: u5317u4eac, values: 9.9355, 18.2142, 12.1315, 11.9911, 10.2637, 4.152, 5.8293, 17.8541, 17.1762, 25.2105, 24.9323, 23.5468, 2.7642, 3.9232, 30.6192, 17.9746, 26.1273, 14.5226, 17.3219, 5.0837, 2.1281, 18.9674, 8.3799 , “title”: “text”: “200812u9500u552eu7edfu8ba1u56feu8868 , “y_axis”: “min”: 0, “max”: 31, “steps”: 2 , “x_axis”: “labels”: “labels”: 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 , “y_legend”: “text”: “ chart 1:10000, “style”: “color:#736AEF; font-size:14px;” ;演示这种方式更适合数据实时加载，比如php中带查询表单，open-flash-chart2的用法很灵活，如果你是新手可能现在还是一头雾水，上面的json的格式各个参数将在下一节里做详细的解释。前面俩节讲了open flash chart的基本调用方法，下来开始我们来详细的通过实例来分析OFC的参数设置。首先今天要讲的是json数据格式所代表的意义，做了下简单的注释，英文不好的同学可以找翻译软件翻译一下官网的说明，这里只挑重要的来讲。#title参数 “title”: “text”: “Chart Demo”, “style”: “font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;” title是非必选参数，title下有text和style俩个参数，相信不用多做解释大家都能明白是和什么意思，需要注意的是FLASH里的style所设置的CSS跟网页里不完全一样，详细的可以google搜索了解一下。#y_legend参数 “y_legend”: “text”:”Chart Demo”, “style”:” y_legend也是可选参数，值y轴的说明#x_axis参数 x轴的设置 “x_axis”: “stroke”: 1,/X轴线的宽度 “tick-height”: 10,/刻度线高度值 “colour”: “#d000d0,/线的颜色 “grid-colour”: “#00ff00,/表格线颜色 “labels”: January,February,March,April,May,June,July,August,Spetember/标签 另外x_axis还有的参数:3d: boolean, 设置3Dsteps: 取决于tick-height属性 间隔#Y Axis 参数的属性跟X轴的基本相同#Elements 是一个数组对象；如line,bar,scatter等不同的图表，可以在一个chart里有多个elements对象 “elements”: type: bar, alpha: 0.5, colour: #9933CC, text: Page views, font-size: 10, values : 9,6,7,9,5,7,6,9,7 , “type”: “bar”, “alpha”: 0.5, “colour”: “#CC9933, “text”: “Page views 2, “font-size”: 10, “values” : 9,6,7,9,5,7,6,9,7 基本上就是这些了，还有一些别的属性可以参见英文文档，后面将这种来将php生成chart所需json数据的类库的用法。require_once(includes/open-flash-chart2/php-ofc-library/open-flash-chart.php);$tmpx = array();/x轴标签的数组$tmpy = array();/从数据库查询得到y轴数据的数组$title = new title( 年销售统计图表 ); $title-set_style(font-size:18px;); $bar = new bar(); $bar-text= $city; $bar-set_values( $tmpy ); $y = new y_axis(); $y-set_range(0,ceil(max($tmpy),20); $x = new x_axis(); $x-set_labels_from_array( $tmpx ); $yl = new y_legend(); $yl-y_legend( chart 1:10000 ); $yl-set_style( color:#736AEF; font-size:12px; ); $chart = new open_flash_chart(); $chart-set_title( $title ); $chart-set_y_axis( $y ); $chart-set_x_axis( $x ); $chart-set_y_legend($yl); $chart-add_element($bar);$chart-toString();/生成json数据$chart-toPrettyString();/生成适合阅读的数据格式具体那一种图表格式可以打开相对应的class文件查询相关的参数、函数，用法都比较简单的。元素/属性形状或作用参数1参数2参数3参数4参数5参数6title显示图表主题（最上方）主题名称样式stylex_legendX坐标说明（最下方, 与X轴平行）说明信息字体大小字体颜色y_legendY坐标说明（最左边, 与Y轴平行）说明信息字体大小字体颜色x_labels设置X轴坐标显示y_label_sizex_label_style设置X轴样式字体大小字体颜色角度(0:0度, 1:90度,2:45度)设置X轴线条间隔X轴间隔线条颜色y_label_style设置Y轴样式字体大小字体颜色x_ticks控制X轴坐标标记显示X轴坐标标记长度y_ticks控制Y轴坐标标记显示Y轴坐标标记最小长度Y轴坐标标记最大长度将Y轴分割成几个段X_min设置X轴坐标最小值X轴坐标最小值x_max设置X轴坐标最大值X轴坐标最大值y_min设置Y轴坐标最小值Y轴坐标最小值y_max设置Y轴坐标最大值Y轴坐标最大值bg_colour设置背景颜色inner_background设置坐标区域内部颜色颜色1颜色2(从颜色1渐变到颜色2)渐变角度bg_image设置背景图片图片位置bg_image_x设置图片横向位置left |center |rightbg_bg_image_y设置图片纵向位置top |middle |bottomx_axis_colour设置X轴颜色y_axis_colour设置Y轴颜色x_axis_steps设置X轴线条间隔x_axis_3d设置X轴3d效果的高度x_grid_colour设置X轴线条颜色y_grid_colour设置Y轴线条颜色show_y2设置Y轴右边也显示坐标true |falsey2_lines设置哪个图是根据右边Y坐标的值来显示可以有多个y_format格式化Y轴显示(常与#val#等联合使用)values设置值num_decimals格式化小数位数is_fixed_num_decimals_forced是否强制格式化小数true |falseis_decimal_separator_c