open-flash-chart2

最新推荐文章于 2024-09-20 16:43:14 发布

showrock

最新推荐文章于 2024-09-20 16:43:14 发布

阅读量4.1k

点赞数

文章标签： microsoft flash json image function php

<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里，演示

上一节提到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); }

演示

这种方式更适合数据实时加载，比如php中带查询表单，open-flash-chart2的用法很灵活，如果你是新手可能现在还是一头雾水，上面的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"]// 标签
               }
}

另外x_axis还有的参数:

3d: boolean, 设置3D
steps: 取决于tick-height属性间隔

#Y Axis 参数的属性跟X轴的基本相同

#Elements 是一个数组对象；如line,bar,scatter等不同的图表，可以在一个chart里有多个elements对象

{
“elements”:[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      “type”:      “bar”,
      “alpha”:     0.5,
      “colour”:    “#CC9933″,
      “text”:      “Page views 2″,
      “font-size”: 10,
      “values” :   [9,6,7,9,5,7,6,9,7]
    }
]
}

基本上就是这些了，还有一些别的属性可以参见英文文档，后面将这种来将php生成chart所需json数据的类库的用法。

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文件查询相关的参数、函数，用法都比较简单的。

元素 / 属性	形状或作用	参数 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	设置 X 轴 3d 效果的高度
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 立体柱状图