【Open Flash Chart2.0】Ajax + PHP 获取图表

发布时间：2020-12-15 18:44:14 所属栏目：百科来源：网络整理

导读：通过AJAX 操作 Open Flash Chart 2.0，显示图表，数据源是PHP输出。 HTML代码如下： htmlheadscript type="text/javascript" src="open-flash-chart/js/swfobject.js"/scriptscript type="text/javascript" src="open-flash-chart/js/jquery.min.js"/script/

通过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,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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!