在項目中使用Anychart圖表已經有8個月有余，對Anychart整體也有了一定的了解，產品升級的空閑期，分享一點Anychart圖表的使用經驗。
?
- 前言
Anychart是一款基于Flash/HTML5（最新的6.0x版本開始支持HTML5）進行圖形渲染的圖表組件，圖數據采用了XML格式進行解析，主要提供Javascript方法調用的形式來將圖形渲染到web頁面。
這是一款商業收費產品，使用未授權的產品時，圖表背景會有“Anychart”字樣的水印。
官網地址： http://www.anychart.com/home/
幫助文檔地址： http://anychart.com/products/anychart/docs/users-guide/index.html?QuickStart.html
XML格式標簽文檔說明： http://anychart.com/products/anychart/docs/xmlReference/index.html
擼主大多數Anychart技術都是從幫助文檔中學習的，雖然英語只有四級，但是看起來感覺壓力也不大，某些單詞不懂就谷歌翻譯。
?
- HelloWorld
如何創建自己的第一個圖表在官網文檔中已經有詳細說明，鏈接在 這里 ，下面我再結合例子簡單說明一下。
?
首先下載圖表的相關文件，主要包括一個或兩個js、多個swf文件。
Anychart的js文件有兩個：AnyChart.js和AnyChartHTML5.js，前者是圖表必備js文件，后者是如果你需要支持HTML5時才需要的文件，所以有的時候可用可不用。
Anychart的swf文件也有多個，用得最多的是AnyChart.swf和Preloader.swf，前者包含了所有的圖數據；后者是一個優化性能的文件，在IE高版本瀏覽器下效果明顯，如果圖很多并在一頁顯示不完，它可以達到延遲加載的效果，即優先顯示第一頁的圖。同時呢，如果你下載的是官方給的鏈接，你會發現除了以上兩個swf還會有Chart.swf、Pie.swf、Funnel.swf等等文件，這些文件都比Anychart.swf小，其實他們的作用是如果你只想用某一類的圖并且為了加載更快，可以單一選擇某一種swf來渲染。
?
然后準備一個html文件和xml文件。因為Anychart可以在web頁面中顯示，所以我們需要準備一個html文件，并且在里面編寫圖形生成代碼，最后訪問這個html即可看到效果。而XML前面已經說了，Anychart是通過解析XML數據來生成圖形的，也就是說你希望圖形是以餅狀還是柱狀還是別的圖形顯示，已經你希望顯示的數據是什么，是否顯示標題，是否顯示動畫效果等等配置都是通過XML來說明的。
?
下面看一個簡單的XML例子，通過plot_type來定義圖是水平還是豎直顯示；通過<series>的type來說明是什么類型的圖；<point>是一條數據，下面有5條就表示圖表會出5條柱子；<point>的name有很多種術語解釋，我通常稱之為“指標”，而屬性y則是指標對應的數據值，我通常稱之為“指標值”。
?
<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，個人認為是是最最簡單的XML了，在項目中你可能會遇到比這復雜百倍的XML，但是不要氣餒，后續我會教大家如何讓圖表“組件化”。?
?
?
下面是一段HTML代碼，這段代碼告訴你如何調用Anychart并且生成圖形，首先需要new Anychart(swf url)的形式生成Anychart對象，然后設置圖形的高度和寬度，通過setXMLFile(xml url)指定XML數據文件，在通過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圖表生成了，如果想看到圖的效果，可以在官網下載該例子（ 點這里 ）
?
針對上面的HTML呢，做一些擴展，有些用戶不希望通過chart.write方法出圖，有些用戶不希望傳入XML文件地址，而是直接傳一段XML字符串來生成圖，其實這個功能Anychart都提供了，并且也是我一直很推薦的寫法。
下面這段代碼介紹了如何解決上面的需求：通過new Anychart(swf url,preloader swf) 傳入preloader.swf地址來提高大數據量圖表加載速度，通過setXMLData方法可以傳入XML字符串，通過write(html id)來將圖表渲染到指定HTML標簽內。Anychart圖表高寬度支持傳入px像素值，也支持百分百比的形式，需要注意的是圖表的高寬度依賴于自己父容器（html標簽）的高寬度，即如果你的父容器本身很小，那么圖表像素設置再高也不會有效果的。
?
<!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>
?
- 總結
生成圖表分為以下幾個簡單的步驟：
①環境搭建：準備Anychart必備文件（Javascript和swf）
②準備XML數據
③web頁面編寫代碼，調用Anychart對象生成圖形
?
第一篇說得很簡單，后續我將從多方面一步步介紹如何靈活使用Anychart。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
