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

最新推荐文章于 2023-02-19 19:04:48 发布

原创最新推荐文章于 2023-02-19 19:04:48 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #flash #php #callback #function #charts

开源软件专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何通过AJAX操作OpenFlashChart2.0，结合PHP输出数据源来动态展示图表。具体展示了HTML、JS与PHP的整合应用，以及如何在网页中嵌入并操控Flash图表。

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