Asp.net报表制作 OpenFlashChart免费图表组件
OpenFlashChart是一款開源的以Flash和Javascript為技術(shù)基礎(chǔ)的免費(fèi)圖表組件,用它能創(chuàng)建一些很有效果的報(bào)表分析圖表。
最重要的是它是開源和免費(fèi)的,該組件使用flash展示報(bào)表能夠很好的做到與瀏覽器進(jìn)行集成,目前瀏覽器基本都能很好的支持flash。
OpenFlashChart的基本使用
<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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 对二进制文件的操作(c++ 程序设计 b
- 下一篇: 标量函数,多语句表值函数,内嵌表值函数