Asp.net報(bào)表制作 OpenFlashChart免費(fèi)圖表組件

　　OpenFlashChart是一款開源的以Flash和Javascript為技術(shù)基礎(chǔ)的免費(fèi)圖表組件，用它能創(chuàng)建一些很有效果的報(bào)表分析圖表。

　　最重要的是它是開源和免費(fèi)的，該組件使用flash展示報(bào)表能夠很好的做到與瀏覽器進(jìn)行集成，目前瀏覽器基本都能很好的支持flash。

　　OpenFlashChart的基本使用

　　<script type="text/javascript" src="swfobject.js"></script>
　　<script type="text/javascript">
　　swfobject.embedSWF("open-flash-chart.swf", "mychart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"datafile/line.aspx"});
　　</script>
　　<div id="mychart"> </div>

　　從兩方面進(jìn)行詳細(xì)講解：腳本swfobject.js和參數(shù){"data-file":"datafile/line.aspx"}。
　　用JavaScript嵌入你的SWF, swfobject.js使用簡(jiǎn)介
　　swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)有5個(gè)必須的參數(shù)和4個(gè)可選的參數(shù)：
　　swfUrl（String，必須的）指定SWF的URL。
　　id（String，必須的）指定將會(huì)被Flash內(nèi)容替換的HTML元素（包含你的替換內(nèi)容）的id。
　　width（String，必須的）指定SWF的寬。
　　height（String，必須的）指定SWF的高。
　　version（String，必須的）指定你發(fā)布的SWF對(duì)應(yīng)的Flash Player版本（格式為：major.minor.release）。
　　expressInstallSwfurl（String，可選的）指定express install SWF的URL并激活A(yù)dobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]。
　　flashvars（String，可選的）用name:value對(duì)指定你的flashvars。
　　params（String，可選的）用name:value對(duì)指定你的嵌套o(hù)bject元素的params。
　　attributes（String，可選的）用name:value對(duì)指定object的屬性。

　　注意：在不破壞參數(shù)順序的情況下，你可以忽略可選參數(shù)。如果你不想使用一個(gè)可選參數(shù)，但是會(huì)使用后面的一個(gè)可選參數(shù)，你可以簡(jiǎn)單的傳入false作為參數(shù)的值。對(duì)flashvars、 params和 attributes這些JavaScript對(duì)象來說，你也可以相應(yīng)的傳入一個(gè)空對(duì)象{}。

　　OpenFlashChart接收的數(shù)據(jù)文件格式詳解
　　swfobject.embedSWF("open-flash-chart.swf", "mychart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"datafile/ bar1.txt"});
　　通過參數(shù){"data-file":"datafile/ bar1.txt"}｛“名稱”：“值”｝來進(jìn)行圖表數(shù)據(jù)的接收來生成對(duì)應(yīng)圖形。
　　文件datafile/ bar1.txt內(nèi)容格式：

?

　　{
　　"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,
　　"on-click":"test(9)",
　　"values" : [
　　1.5,1.69,1.88,2.06,2.21,2.34,
　　{"value":2.44,"colour":"#FF0000","tip":"monkies","on-click":"anchor_test"},
　　2.35,2.23,2.08]
　　}
　　],
　　"y_axis":{
　　"max": 3
　　},
　　"x_axis": {
　　"min": 5,
　　"max": 15
　　}
　　}
　　餅圖：
　　{
　　"title":{"text":"Pie","style":"{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"},
　　"elements":[{"border":2,"alpha":0.6,"animate":false,"start-angle":0,"values":[2,3],"font-size":0,"fillalpha":0.35,"type":"pie"}],
　　"x_legend":{"text":"x-axis legend","style":"{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"}}

open-flash-chart參數(shù)對(duì)照表

元素/屬性	形狀或作用	參數(shù)1	參數(shù)2	參數(shù)3	參數(shù)4	參數(shù)5	參數(shù)6
title	顯示圖表主題（最上方）	主題名稱	樣式style	?	?	?	?
x_legend	X坐標(biāo)說明（最下方, 與X軸平行）	說明信息	字體大小	字體顏色	?	?	?
y_legend	Y坐標(biāo)說明（最左邊, 與Y軸平行）	說明信息	字體大小	字體顏色	?	?	?
x_labels	設(shè)置X軸坐標(biāo)顯示	?	?	?	?	?	?
y_label_size	?	?	?	?	?	?	?
x_label_style	設(shè)置X軸樣式	字體大小	字體顏色	角度(0:0度, 1:90度,2:45度)	設(shè)置X軸線條間隔	X軸間隔線條顏色	?
y_label_style	設(shè)置Y軸樣式	字體大小	字體顏色	?	?	?	?
x_ticks	控制X軸坐標(biāo)標(biāo)記顯示	X軸坐標(biāo)標(biāo)記長(zhǎng)度	?	?	?	?	?
y_ticks	控制Y軸坐標(biāo)標(biāo)記顯示	Y軸坐標(biāo)標(biāo)記最小長(zhǎng)度	Y軸坐標(biāo)標(biāo)記最大長(zhǎng)度	將Y軸分割成幾個(gè)段	?	?	?
X_min	設(shè)置X軸坐標(biāo)最小值	X軸坐標(biāo)最小值	?	?	?	?	?
x_max	設(shè)置X軸坐標(biāo)最大值	X軸坐標(biāo)最大值	?	?	?	?	?
y_min	設(shè)置Y軸坐標(biāo)最小值	Y軸坐標(biāo)最小值	?	?	?	?	?
y_max	設(shè)置Y軸坐標(biāo)最大值	Y軸坐標(biāo)最大值	?	?	?	?	?
bg_colour	設(shè)置背景顏色	?	?	?	?	?	?
inner_background	設(shè)置坐標(biāo)區(qū)域內(nèi)部顏色	顏色1	顏色2(從顏色1漸變到顏色2)	漸變角度	?	?	?
bg_image	設(shè)置背景圖片	圖片位置	?	?	?	?	?
bg_image_x	設(shè)置圖片橫向位置	[left |center |right]	?	?	?	?	?
bg_bg_image_y	設(shè)置圖片縱向位置	[top |middle |bottom]	?	?	?	?	?
x_axis_colour	設(shè)置X軸顏色	?	?	?	?	?	?
y_axis_colour	設(shè)置Y軸顏色	?	?	?	?	?	?
x_axis_steps	設(shè)置X軸線條間隔	?	?	?	?	?	?
x_axis_3d	設(shè)置X軸3d效果的高度	?	?	?	?	?	?
x_grid_colour	設(shè)置X軸線條顏色	?	?	?	?	?	?
y_grid_colour	設(shè)置Y軸線條顏色	?	?	?	?	?	?
show_y2	設(shè)置Y軸右邊也顯示坐標(biāo)	[true |false]	?	?	?	?	?
y2_lines	設(shè)置哪個(gè)圖是根據(jù)右邊Y坐標(biāo)的值來顯示	[可以有多個(gè)]	?	?	?	?	?
y_format	格式化Y軸顯示(常與#val#等聯(lián)合使用)	?	?	?	?	?	?
values	設(shè)置值	?	?	?	?	?	?
num_decimals	格式化小數(shù)位數(shù)	?	?	?	?	?	?
is_fixed_num_decimals_forced	是否強(qiáng)制格式化小數(shù)	[true |false]	?	?	?	?	?
is_decimal_separator_comma	是否使用小數(shù)分隔符	[true: , |false: . ](與千位分隔符相反)	?	?	?	?	?
is_thousand_separator_disabled	是否使用千位分隔符	[true |false]	?	?	?	?	?
x_offset	是否自動(dòng)補(bǔ)償以適應(yīng)圖的顯示	[true |false]	?	?	?	?	?
bar	柱狀圖	透明度	顏色	名稱#key#	名稱字體大小	?	?
bar_glass	水晶柱狀圖	透明度	內(nèi)部顏色	外框顏色	名稱#key#	名稱字體大小	?
bar_fade	漸變柱狀圖	透明度	顏色	名稱#key#	名稱字體大小	?	?
bar_arrow	帶有箭頭的柱狀圖	透明度	顏色	名稱#key#	名稱字體大小	?	?
bar_3d	3D立體柱狀圖

效果圖：

posted on 2012-03-23 16:36?JLong 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/comjlong/archive/2012/03/23/2413873.html

總結(jié)

以上是生活随笔為你收集整理的Asp.net报表制作 OpenFlashChart免费图表组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。