在項(xiàng)目中使用Anychart圖表已經(jīng)有8個(gè)月有余，對(duì)Anychart整體也有了一定的了解，產(chǎn)品升級(jí)的空閑期，分享一點(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)品時(shí)，圖表背景會(huì)有“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í)的，雖然英語只有四級(jí)，但是看起來感覺壓力也不大，某些單詞不懂就谷歌翻譯。
?
- HelloWorld
如何創(chuàng)建自己的第一個(gè)圖表在官網(wǎng)文檔中已經(jīng)有詳細(xì)說明，鏈接在 這里 ，下面我再結(jié)合例子簡單說明一下。
?
首先下載圖表的相關(guān)文件，主要包括一個(gè)或兩個(gè)js、多個(gè)swf文件。
Anychart的js文件有兩個(gè)：AnyChart.js和AnyChartHTML5.js，前者是圖表必備js文件，后者是如果你需要支持HTML5時(shí)才需要的文件，所以有的時(shí)候可用可不用。
Anychart的swf文件也有多個(gè)，用得最多的是AnyChart.swf和Preloader.swf，前者包含了所有的圖數(shù)據(jù)；后者是一個(gè)優(yōu)化性能的文件，在IE高版本瀏覽器下效果明顯，如果圖很多并在一頁顯示不完，它可以達(dá)到延遲加載的效果，即優(yōu)先顯示第一頁的圖。同時(shí)呢，如果你下載的是官方給的鏈接，你會(huì)發(fā)現(xiàn)除了以上兩個(gè)swf還會(huì)有Chart.swf、Pie.swf、Funnel.swf等等文件，這些文件都比Anychart.swf小，其實(shí)他們的作用是如果你只想用某一類的圖并且為了加載更快，可以單一選擇某一種swf來渲染。
?
然后準(zhǔn)備一個(gè)html文件和xml文件。因?yàn)锳nychart可以在web頁面中顯示，所以我們需要準(zhǔn)備一個(gè)html文件，并且在里面編寫圖形生成代碼，最后訪問這個(gè)html即可看到效果。而XML前面已經(jīng)說了，Anychart是通過解析XML數(shù)據(jù)來生成圖形的，也就是說你希望圖形是以餅狀還是柱狀還是別的圖形顯示，已經(jīng)你希望顯示的數(shù)據(jù)是什么，是否顯示標(biāo)題，是否顯示動(dòng)畫效果等等配置都是通過XML來說明的。
?
下面看一個(gè)簡單的XML例子，通過plot_type來定義圖是水平還是豎直顯示；通過<series>的type來說明是什么類型的圖；<point>是一條數(shù)據(jù)，下面有5條就表示圖表會(huì)出5條柱子；<point>的name有很多種術(shù)語解釋，我通常稱之為“指標(biāo)”，而屬性y則是指標(biāo)對(duì)應(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，個(gè)人認(rèn)為是是最最簡單的XML了，在項(xiàng)目中你可能會(huì)遇到比這復(fù)雜百倍的XML，但是不要?dú)怵H，后續(xù)我會(huì)教大家如何讓圖表“組件化”。?
?
?
下面是一段HTML代碼，這段代碼告訴你如何調(diào)用Anychart并且生成圖形，首先需要new Anychart(swf url)的形式生成Anychart對(duì)象，然后設(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>
?
下面看最后的圖形效果
?
至此，一個(gè)最簡單的Anychart圖表生成了，如果想看到圖的效果，可以在官網(wǎng)下載該例子（ 點(diǎn)這里 ）
?
針對(duì)上面的HTML呢，做一些擴(kuò)展，有些用戶不希望通過chart.write方法出圖，有些用戶不希望傳入XML文件地址，而是直接傳一段XML字符串來生成圖，其實(shí)這個(gè)功能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è)置再高也不會(huì)有效果的。
?
<!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é)
生成圖表分為以下幾個(gè)簡單的步驟：
①環(huán)境搭建：準(zhǔn)備Anychart必備文件（Javascript和swf）
②準(zhǔn)備XML數(shù)據(jù)
③web頁面編寫代碼，調(diào)用Anychart對(duì)象生成圖形
?
第一篇說得很簡單，后續(xù)我將從多方面一步步介紹如何靈活使用Anychart。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
