open flash chart应用-投票
先看演示：DEMO
闲来没事，用ofc搞了一个投票小程序，进一步巩固一下ofc和jquery，试验一下ofc里加入onclick时间的效果，果然很好用，而且调用js的功能函数相当方便，只需在json数据里加入“”on-click”,”myfunction(parm)””就可以，投票程序代码写的很简单，没有做什么优化。
废话少说，看代码：
先看演示：DEMO
闲来没事，用ofc搞了一个投票小程序，进一步巩固一下ofc和jquery，试验一下ofc里加入onclick时间的效果，果然很好用，而且调用js的功能函数相当方便，只需在json数据里加入“”on-click”,”myfunction(parm)””就可以，投票程序代码写的很简单，没有做什么优化。
废话少说，看代码：
例子如下：
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( "chinaticket.com 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文件查询相关的参数、函数，用法都比较简单的。
前面俩节讲了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"]//标签
}
}
年底了，公司要统计销售数据，于是就找了几个开源免费的chart程序来研究，PHP/SWF Charts 和 FusionCharts Free，不过最终还是选择了Open Flash Char，官方提供了很多实例，而做订单的销售统计并不需要多么花哨的东西，OFC2的功能也已经足够强大了。
2.0的版本数据格式完全用json来处理，非常灵活，官方提供了各种接口程序，包括PHP/PHP5、Pear、Python、Java、Dotnet，调用很简单
<html>
<head>
<script type=”text/javascript” src=”js/swfobject.js”></script>
<script type=”text/javascript”>
swfobject.embedSWF(
“open-flash-chart.swf”, “my_chart”, “550″, “200″,
“9.0.0″, “expressInstall.swf”,
{“data-file”:”data.txt”}
);
</script>
</head>
<body>
<p>Hello World</p>
<div id=”my_chart”></div>
</body>
</html>
数据文件格式如下：
{
“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里，演示