nav-left cat-right
cat-right
open-flash-chart参数对照表

元素/属性

形状或作用

参数1

参数2

参数3

参数4

参数5

参数6

title

显示图表主题(最上方)

主题名称

样式style

 

 

 

 

x_legend

X坐标说明(最下方, X轴平行)

说明信息

字体大小

字体颜色

 

 

 

y_legend

Y坐标说明(最左边, Y轴平行)

说明信息

字体大小

字体颜色

 

 

 

x_labels

设置X轴坐标显示

 

 

 

 

 

 

y_label_size

 

 

 

 

 

 

 

x_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 |right]

 

 

 

 

 

bg_bg_image_y

设置图片纵向位置

[top |middle |bottom]

 

 

 

 

 

x_axis_colour

设置X轴颜色

 

 

 

 

 

 

y_axis_colour

设置Y轴颜色

 

 

 

 

 

 

x_axis_steps

设置X轴线条间隔

 

 

 

 

 

 

x_axis_3d

设置X3d效果的高度

 

 

 

 

 

 

x_grid_colour

设置X轴线条颜色

 

 

 

 

 

 

y_grid_colour

设置Y轴线条颜色

 

 

 

 

 

 

show_y2

设置Y轴右边也显示坐标

[true |false]

 

 

 

 

 

y2_lines

设置哪个图是根据右边Y坐标的值来显示

[可以有多个]

 

 

 

 

 

y_format

格式化Y轴显示(常与#val#等联合使用)

 

 

 

 

 

 

values

设置值

 

 

 

 

 

 

num_decimals

格式化小数位数

 

 

 

 

 

 

is_fixed_num_decimals_forced

是否强制格式化小数

[true |false]

 

 

 

 

 

is_decimal_separator_comma

是否使用小数分隔符

[true: , |false: . ](与千位分隔符相反)

 

 

 

 

 

is_thousand_separator_disabled

是否使用千位分隔符

[true |false]

 

 

 

 

 

x_offset

是否自动补偿以适应图的显示

[true |false]

 

 

 

 

 

bar

柱状图

透明度

颜色

名称#key#

名称字体大小

 

 

bar_glass

水晶柱状图

透明度

内部颜色

外框颜色

名称#key#

名称字体大小

 

bar_fade

渐变柱状图

透明度

颜色

名称#key#

名称字体大小

 

 

bar_arrow

带有箭头的柱状图

透明度

颜色

名称#key#

名称字体大小

 

 

bar_3d

3D立体柱状图

open-flash-chart系列教程(7)–PHP类库的用法

例子如下:


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系列教程(6)–饼图

阅读全部

open-flash-chart系列教程(5)–线图

阅读全部

open-flash-chart系列教程(4)–柱形图

阅读全部

open flash chart2系列教程(3)–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"]//标签
               }
}

阅读全部

open-flash-chart2系列教程(2)

上一节提到open-flash-chart2的数据是通过存储在txt文件中,然后通过类似那个http://yoururl/chart.html?ofc=datafile.txt 这样的形式来加载不同的数据,当然ofc后面的参数可以是php文件,php类库的使用将在以后的教程中出现,本节将讨论使用js加载数据的另一种方法,代码如下:
是<script type="text/javascript" src="js/json/json2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>

<script type="text/javascript">

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 window[movieName];
  } else {
    return document[movieName];
  }
}
 
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": "chinaticket.com chart 1:10000",
    "style": "color:#736AEF; font-size:14px;"
  }
};</script>

演示

这种方式更适合数据实时加载,比如php中带查询表单,open-flash-chart2的用法很灵活,如果你是新手可能现在还是一头雾水,上面的json的格式各个参数将在下一节里做详细的解释。