在項(xiàng)目中使用Anychart圖表已經(jīng)有8個月有余,對Anychart整體也有了一定的了解,產(chǎn)品升級的空閑期,分享一點(diǎn)Anychart圖表的使用經(jīng)驗(yàn)。
?
- 前言
Anychart是一款基于Flash/HTML5(最新的6.0x版本開始支持HTML5)進(jìn)行圖形渲染的圖表組件,圖數(shù)據(jù)采用了XML格式進(jìn)行解析,主要提供Javascript方法調(diào)用的形式來將圖形渲染到web頁面。
這是一款商業(yè)收費(fèi)產(chǎn)品,使用未授權(quán)的產(chǎn)品時,圖表背景會有“Anychart”字樣的水印。
官網(wǎng)地址: http://www.anychart.com/home/
幫助文檔地址: http://anychart.com/products/anychart/docs/users-guide/index.html?QuickStart.html
XML格式標(biāo)簽文檔說明: http://anychart.com/products/anychart/docs/xmlReference/index.html
擼主大多數(shù)Anychart技術(shù)都是從幫助文檔中學(xué)習(xí)的,雖然英語只有四級,但是看起來感覺壓力也不大,某些單詞不懂就谷歌翻譯。
?
- HelloWorld
如何創(chuàng)建自己的第一個圖表在官網(wǎng)文檔中已經(jīng)有詳細(xì)說明,鏈接在 這里 ,下面我再結(jié)合例子簡單說明一下。
?
首先下載圖表的相關(guān)文件,主要包括一個或兩個js、多個swf文件。
Anychart的js文件有兩個:AnyChart.js和AnyChartHTML5.js,前者是圖表必備js文件,后者是如果你需要支持HTML5時才需要的文件,所以有的時候可用可不用。
Anychart的swf文件也有多個,用得最多的是AnyChart.swf和Preloader.swf,前者包含了所有的圖數(shù)據(jù);后者是一個優(yōu)化性能的文件,在IE高版本瀏覽器下效果明顯,如果圖很多并在一頁顯示不完,它可以達(dá)到延遲加載的效果,即優(yōu)先顯示第一頁的圖。同時呢,如果你下載的是官方給的鏈接,你會發(fā)現(xiàn)除了以上兩個swf還會有Chart.swf、Pie.swf、Funnel.swf等等文件,這些文件都比Anychart.swf小,其實(shí)他們的作用是如果你只想用某一類的圖并且為了加載更快,可以單一選擇某一種swf來渲染。
?
然后準(zhǔn)備一個html文件和xml文件。因?yàn)锳nychart可以在web頁面中顯示,所以我們需要準(zhǔn)備一個html文件,并且在里面編寫圖形生成代碼,最后訪問這個html即可看到效果。而XML前面已經(jīng)說了,Anychart是通過解析XML數(shù)據(jù)來生成圖形的,也就是說你希望圖形是以餅狀還是柱狀還是別的圖形顯示,已經(jīng)你希望顯示的數(shù)據(jù)是什么,是否顯示標(biāo)題,是否顯示動畫效果等等配置都是通過XML來說明的。
?
下面看一個簡單的XML例子,通過plot_type來定義圖是水平還是豎直顯示;通過<series>的type來說明是什么類型的圖;<point>是一條數(shù)據(jù),下面有5條就表示圖表會出5條柱子;<point>的name有很多種術(shù)語解釋,我通常稱之為“指標(biāo)”,而屬性y則是指標(biāo)對應(yīng)的數(shù)據(jù)值,我通常稱之為“指標(biāo)值”。
?
<anychart> <charts> <chart plot_type="CategorizedHorizontal"> <data> <series name="Year 2003" type="Bar"> <point name = "Department Stores" y="637166"/> <point name = "Discount Stores" y="721630"/> <point name = "Men's/Women's Specialty Stores" y="148662"/> <point name = "Juvenile Specialty Stores" y="78662"/> <point name = "All other outlets" y="90000"/> </series> </data> <chart_settings> <title> <text>Sales of ACME Corp.</text> </title> </chart_settings> </chart> </charts> </anychart>
上面這段XML,個人認(rèn)為是是最最簡單的XML了,在項(xiàng)目中你可能會遇到比這復(fù)雜百倍的XML,但是不要?dú)怵H,后續(xù)我會教大家如何讓圖表“組件化”。?
?
?
下面是一段HTML代碼,這段代碼告訴你如何調(diào)用Anychart并且生成圖形,首先需要new Anychart(swf url)的形式生成Anychart對象,然后設(shè)置圖形的高度和寬度,通過setXMLFile(xml url)指定XML數(shù)據(jù)文件,在通過writ方法即可顯示圖形了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Sample AnyChart Flash Chart</title> <script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script> </head> <body> <script type="text/javascript" language="javascript"> //<![CDATA[ var chart = new AnyChart('./swf/AnyChart.swf'); chart.width = 600; chart.height = 300; chart.setXMLFile('./anychart.xml'); chart.write(); //]]> </script> </body> </html>
?
下面看最后的圖形效果
至此,一個最簡單的Anychart圖表生成了,如果想看到圖的效果,可以在官網(wǎng)下載該例子( 點(diǎn)這里 )
?
針對上面的HTML呢,做一些擴(kuò)展,有些用戶不希望通過chart.write方法出圖,有些用戶不希望傳入XML文件地址,而是直接傳一段XML字符串來生成圖,其實(shí)這個功能Anychart都提供了,并且也是我一直很推薦的寫法。
下面這段代碼介紹了如何解決上面的需求:通過new Anychart(swf url,preloader swf) 傳入preloader.swf地址來提高大數(shù)據(jù)量圖表加載速度,通過setXMLData方法可以傳入XML字符串,通過write(html id)來將圖表渲染到指定HTML標(biāo)簽內(nèi)。Anychart圖表高寬度支持傳入px像素值,也支持百分百比的形式,需要注意的是圖表的高寬度依賴于自己父容器(html標(biāo)簽)的高寬度,即如果你的父容器本身很小,那么圖表像素設(shè)置再高也不會有效果的。
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>sample-single-series-column-chart</title> <style type="text/css"> html, body, #chartContainer { width: 100%; height: 100%; padding: 0; margin: 0; } </style> <script type="text/javascript" language="JavaScript" src="js/AnyChart.js"></script> <script type="text/javascript" language="JavaScript"> var chart = new AnyChart('swf/AnyChart.swf', 'swf/Preloader.swf'); chart.width = "100%"; chart.height = "100%"; chart.setXMLData("<anychart>......</anychart>"); chart.write("chartContainer"); </script> </head> <body> <div id="chartContainer"></div> </body> </html>
?
- 總結(jié)
生成圖表分為以下幾個簡單的步驟:
①環(huán)境搭建:準(zhǔn)備Anychart必備文件(Javascript和swf)
②準(zhǔn)備XML數(shù)據(jù)
③web頁面編寫代碼,調(diào)用Anychart對象生成圖形
?
第一篇說得很簡單,后續(xù)我將從多方面一步步介紹如何靈活使用Anychart。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
