通过AJAX 操作 Open Flash Chart 2.0,显示图表,数据源是PHP输出。
HTML代码如下:
<html>
<head>
<script type="text/javascript" src="open-flash-chart/js/swfobject.js"></script>
<script type="text/javascript" src="open-flash-chart/js/jquery.min.js"></script>
</head>
<body>
<form action="#" name="line">
请输入要显示的线条数:<input type="text" name="num" id="num" value=""/>
操作:<a href="javascript:void(0);" id="show">查询</a>
</form>
<div id="my_chart"></div>
</body>
</html>
<script type="text/javascript">
function ajaxchart()
{
$.ajaxSetup({async:false}); //将ajax异步处理设置成同步
var chart = '';
var v_num = $("#num").val();
var url = "data.php";
var callback = function(res) {
chart = res;
};
$.post(url, {num:v_num}, callback, 'text');
return chart;
}
$(function() {
$("#show").click(function() {
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "400", "9.0.0", "expressInstall.swf", {"get-data":"ajaxchart"});
});
});
</script>
PHP代码如下:
<?php
$num = $_POST['num'];
include('OFC/OFC_Chart.php'); //引入OFC
$title = new OFC_Elements_Title('统计图表'); //图表大标题
$title->set_style("{font-size: 20px; text-align: center;}"); //设置标题样式
$chart = new OFC_Chart();
$chart->set_title($title); //将标题设置到图表上
$color = array('#227700', '#FF0000', '#CCDDFF', '#FF8800');
$arr1 = array(10, 20, 15, 13, 25, 30, 40);
$arr2 = array(15, 10, 35, 23, 15, 20, 50);
$arr3 = array(20, 28, 22, 43, 33, 11, 22);
for ($i = 1; $i <= $num; $i++) {
$line = new OFC_Charts_Line();
$line->set_values(${'arr' . $i}); //为了生成不同线条
$line->set_halo_size(0);
$line->set_width(2);
$line->set_dot_size(4);
$line->set_colour(array_pop($color));
$line->set_key("线条{$i}", 12); //设置小标题及字体大小
$chart->add_element($line);
}
$x = new OFC_Elements_Axis_X();
$y = new OFC_Elements_Axis_Y();
$x->set_labels_from_array(array('周一', '周二', '周三', '周四', '周五', '周六', '周日')); //设置X轴下标,可以随意设置,如月份,星期,年
$y->set_range(0, 50, 5); //设置Y轴下标,最大值为50,起始值为0,跨度为5.
$chart->set_x_axis($x);
$chart->set_y_axis($y);
echo $chart->toPrettyString(); //输出
注意:如果X轴的下标是纯数字数组,则使用set_labels;如果不是,则使用set_labels_from_array