FusionCharts Free
這個控件可以也是一個可以免費使用的非常豐富的圖表組件(其實是收費滴,免費的生成圖表的時候會有一個公司的圖片鏈接,很討厭,不過已經有破解版的了-_-),簡稱FCF,是一個跨平臺的圖表組件, 支持多種語言.
關於版本
目前最新的應該是V3.0。
是個英文網站..對應的找找Download就OK了..然後找到你使用的對應的語言.
點擊下載就噢可了。。下載下來的文件時個Demo 介紹的也比較全面.
fcf之所以可以跨平臺跨語言..因爲他的數據庫傳送是通用xml，他也只支持xml傳送數據..對xml的格式要求比較高.也就是錯一個節點,可能圖像都顯示不出來,這點很討厭..當然功能效果方面沒得說..很是炫..
需要的一些文件如下:
等等破解之後的一共49個文件..其實要使用的也就那幾個。
FusionCharts.js 這個也是個很重要的文件 ..
其實上面的幾個flash也就是個模板 ..
下面來看看效果圖,
等等..總之fcf 的動畫效果看起來很是舒服 ..
而且代碼頁非常簡單..
引入js文件:
<script src="JSClass/FusionCharts.js" type="text/javascript"></script> <script type="text/javascript"> var myChart = new FusionCharts("/Charts/Column3D.swf", "myChartId", "600", "500"); myChart.setDataURL("data.xml"); myChart.render("chartdiv"); </script>
Falsh模板路徑: /Charts/Column3D.swf
Xml數據源: "data.xml"
頁面上的div id : ("chartdiv");
這樣就簡單的實現了一個柱形圖,這個擴展性很強,xml數據可以直接寫在：
myChart.setDataXML(strXML);
StrXml 就是一段XML數據..用這段話替換掉myChart.setDataURL("data.xml");就可以了.
網上整理了一些FCF的常用屬性:
功能特性
animation 是否動畫顯示數據，默認爲1(True)
showNames 是否顯示橫向座標軸(x軸)標籤名稱
rotateNames 是否旋轉顯示標籤，默認爲0(False):橫向顯示
showValues 是否在圖表顯示對應的數據值，默認爲1(True)
yAxisMinValue 指定縱軸(y軸)最小值，數字
yAxisMaxValue 指定縱軸(y軸)最小值，數字
showLimits 是否顯示圖表限值(y軸最大、最小值)，默認爲1(True)
圖表標題和軸名稱
caption 圖表主標題
subCaption 圖表副標題
xAxisName 橫向座標軸(x軸)名稱
yAxisName 縱向座標軸(y軸)名稱
圖表和畫布的樣式
bgColor 圖表背景色，6位16進制顏色值
canvasBgColor 畫布背景色，6位16進制顏色值
canvasBgAlpha 畫布透明度，[0-100]
canvasBorderColor 畫布邊框顏色，6位16進制顏色值
canvasBorderThickness 畫布邊框厚度，[0-100]
shadowAlpha 投影透明度，[0-100]
showLegend 是否顯示系列名，默認爲1(True)
字體屬性
baseFont 圖表字體樣式
baseFontSize 圖表字體大小
baseFontColor 圖表字體顏色，6位16進制顏色值
outCnvBaseFont 圖表畫布以外的字體樣式
outCnvBaseFontSize 圖表畫布以外的字體大小
outCnvBaseFontColor 圖表畫布以外的字體顏色，6位16進制顏色值
分區線和網格
numDivLines 畫布內部水平分區線條數，數字
divLineColor 水平分區線顏色，6位16進制顏色值
divLineThickness 水平分區線厚度，[1-5]
divLineAlpha 水平分區線透明度，[0-100]
showAlternateHGridColor 是否在橫向網格帶交替的顏色，默認爲0(False)
alternateHGridColor 橫向網格帶交替的顏色，6位16進制顏色值
alternateHGridAlpha 橫向網格帶的透明度，[0-100]
showDivLineValues 是否顯示Div行的值，默認？？
numVDivLines 畫布內部垂直分區線條數，數字
vDivLineColor 垂直分區線顏色，6位16進制顏色值
vDivLineThickness 垂直分區線厚度，[1-5]
vDivLineAlpha 垂直分區線透明度，[0-100]
showAlternateVGridColor 是否在縱向網格帶交替的顏色，默認爲0(False)
alternateVGridColor 縱向網格帶交替的顏色，6位16進制顏色值
alternateVGridAlpha 縱向網格帶的透明度，[0-100]
數字格式
numberPrefix 增加數字前綴
numberSuffix 增加數字後綴 % 爲 '%25'
formatNumberScale 是否格式化數字,默認爲1(True),自動的給你的數字加上K（千）或M（百萬）；若取0,則不加K或M
decimalPrecision 指定小數位的位數，[0-10] 例如：='0' 取整
divLineDecimalPrecision 指定水平分區線的值小數位的位數，[0-10]
limitsDecimalPrecision 指定y軸最大、最小值的小數位的位數，[0-10]
formatNumber 逗號來分隔數字(千位，百萬位),默認爲1(True)；若取0,則不加分隔符
decimalSeparator 指定小數分隔符,默認爲'.'
thousandSeparator 指定千分位分隔符,默認爲','
Tool-tip/Hover標題
showhovercap 是否顯示懸停說明框，默認爲1(True)
hoverCapBgColor 懸停說明框背景色，6位16進制顏色值
hoverCapBorderColor 懸停說明框邊框顏色，6位16進制顏色值
hoverCapSepChar 指定懸停說明框內值與值之間分隔符,默認爲','
折線圖的參數
lineThickness 折線的厚度
anchorRadius 折線節點半徑，數字
anchorBgAlpha 折線節點透明度，[0-100]
anchorBgColor 折線節點填充顏色，6位16進制顏色值
anchorBorderColor 折線節點邊框顏色，6位16進制顏色值
Set標籤使用的參數
value 數據值
color 顏色
link 鏈接（本窗口打開[Url]，新窗口打開[n-Url]，調用JS函數[JavaScript:函數]）
name 橫向座標軸標籤名稱
本篇簡單介紹下這兩個圖表組件,下篇我將着重介紹FusionCharts Free, 因爲這個圖表的效果還是很炫滴..