在項(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)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
