AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。
AnyChart 可以被用于Web、桌面和移動(dòng)應(yīng)用程序，AnyChart 可運(yùn)行于當(dāng)前PC和Mac上所有主流的瀏覽器，如：Chrome, Safari, Firefox, Internet Explorer 和 Opera，并且可用于所有移動(dòng)平臺(tái)(Android (2.2+) 和 iOS (iPhone, iPad, iPod Touch). )上的主流瀏覽器。
柱狀圖是項(xiàng)目中最常用的圖形之一，他的指標(biāo)在X軸方向，每個(gè)指標(biāo)對(duì)應(yīng)的值在Y軸，Anychart的柱狀圖支持2D和3D效果。
如下代碼片段，是一個(gè)簡(jiǎn)單的柱狀圖的XML配置，要生成一個(gè)柱狀圖，你就必須配置<chart>的plot_type屬性為"CategorizedVertical"，并且要配置<data_plot_settings>標(biāo)簽的屬性default_series_type為"Bar"，這樣整個(gè)圖就是柱狀了。
Xml代碼
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="CategorizedVertical">
5. <data_plot_settings default_series_type="Bar">
6. <bar_series>
7. <tooltip_settings enabled="True" />
8. </bar_series>
9. </data_plot_settings>
10. <data>
11. <series name="Quarter 1">
12. <point name="John" y="10000" />
13. <point name="Jake" y="12000" />
14. <point name="Peter" y="18000" />
15. <point name="James" y="11000" />
16. <point name="Mary" y="9000" />
17. </series>
18. </data>
19. </chart>
20. </charts>
21.</anychart>
條形圖其實(shí)是柱狀圖旋轉(zhuǎn)后的效果，指標(biāo)在Y軸了，而數(shù)據(jù)在X軸，同時(shí)條形圖也支持2D和3D效果。
條形圖的配置與柱狀圖也非常類似，你只需要把柱狀圖的plot_type屬性修改為"CategorizedHorizontal"即可顯示成條形圖。
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="CategorizedHorizontal">
5. <data_plot_settings default_series_type="Bar">
6. <bar_series>
7. <tooltip_settings enabled="True" />
8. </bar_series>
9. </data_plot_settings>
10. <data>
11. <series name="Quarter 1">
12. <point name="John" y="10000" />
13. <point name="Jake" y="12000" />
14. <point name="Peter" y="18000" />
15. <point name="James" y="11000" />
16. <point name="Mary" y="9000" />
17. </series>
18. </data>
19. </chart>
20. </charts>
21.</anychart>
線形圖分折線圖和曲線圖，常用于數(shù)據(jù)發(fā)展趨勢(shì)分析。
看下面的代碼片段，這是配置折線圖的方法，你就必須配置<chart>的plot_type屬性為"CategorizedVertical"，并且要配置<data_plot_settings>標(biāo)簽的屬性default_series_type為"Line"，這樣整個(gè)圖就是折線圖了。那么如果你將plot_type屬性設(shè)置成"CategorizedHorizontal"，結(jié)果也是折線，只是折線的指標(biāo)在Y軸，而數(shù)據(jù)在X軸了。
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="CategorizedVertical">
5. <data_plot_settings default_series_type="Line" />
6. <data>
7. <series name="2004 Sales">
8. <point name="January" y="12000" />
9. <point name="February" y="15000" />
10. <point name="March" y="16000" />
11. <point name="April" y="15000" />
12. <point name="May" y="14000" />
13. </series>
14. </data>
15. </chart>
16. </charts>
17.</anychart>
曲線圖與折線圖配置類似，只需要將default_series_type屬性修改為"Spline"即可，看下面代碼
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="CategorizedVertical">
5. <data_plot_settings default_series_type="Spline" />
6. <data>
7. <series name="2004 Sales">
8. <point name="January" y="12000" />
9. <point name="February" y="15000" />
10. <point name="March" y="16000" />
11. <point name="April" y="15000" />
12. <point name="May" y="14000" />
13. </series>
14. </data>
15. </chart>
16. </charts>
17.</anychart>
- 餅圖和圓環(huán)圖（Pie and Donut Chart）
餅狀圖在項(xiàng)目中應(yīng)用也很廣泛，主要用于展示指標(biāo)占用比例，Anychart的餅圖也支持2D和3D兩種。
餅圖的代碼如下，不同于前面幾種圖，餅狀圖只需要配置<chart>的plot_type屬性為"Pie"即可。
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="Pie">
5. <data>
6. <series name="Year 2003" >
7. <point name="Department Stores" y="637166" />
8. <point name="Discount Stores" y="721630" />
9. <point name="Men's/Women's Specialty Stores" y="148662" />
10. <point name="Juvenile Specialty Stores" y="78662" />
11. <point name="All other outlets" y="90000" />
12. </series>
13. </data>
14. </chart>
15. </charts>
16.</anychart>
圓環(huán)圖也是非常簡(jiǎn)單，只需要配置<chart>的plot_type屬性為"Doughnut"即可
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="Doughnut">
5. <data>
6. <series name="Year 2003" >
7. <point name="Department Stores" y="637166" />
8. <point name="Discount Stores" y="721630" />
9. <point name="Men's/Women's Specialty Stores" y="148662" />
10. <point name="Juvenile Specialty Stores" y="78662" />
11. <point name="All other outlets" y="90000" />
12. </series>
13. </data>
14. </chart>
15. </charts>
16.</anychart>
介紹餅狀圖的一個(gè)特殊功能：Exploded Slices。餅圖默認(rèn)如果被點(diǎn)擊的話，被點(diǎn)擊的部分會(huì)伸出來(lái)突出顯示。而且你也可以設(shè)置圖形顯示時(shí)默認(rèn)突出顯示哪一塊或哪幾塊。
如下面的代碼，我設(shè)置了point name為Department開(kāi)頭的和All開(kāi)頭的兩個(gè)指標(biāo)屬性exploded為"true"，那么結(jié)果就是渲染餅圖后，這兩個(gè)被設(shè)置的指標(biāo)突出向外顯示了。
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="Pie">
5. <data>
6. <series name="Year 2003" >
7. <point name="Department Stores" y="637166" exploded="True"/>
8. <point name="Discount Stores" y="721630" />
9. <point name="Men's/Women's Specialty Stores" y="148662" />
10. <point name="Juvenile Specialty Stores" y="78662" />
11. <point name="All other outlets" y="90000" exploded="True"/>
12. </series>
13. </data>
14. </chart>
15. </charts>
16.</anychart>
不過(guò)Anychart的餅圖突出顯示有一個(gè)不滿意的地方就是你選擇了一塊突出顯示后，再選擇別的指標(biāo)，原來(lái)被選擇的指標(biāo)不會(huì)自動(dòng)收回。
另外有的用戶不希望點(diǎn)擊餅圖時(shí)突出顯示，則需要配置一個(gè)<pie_series>標(biāo)簽并且設(shè)置explode_on_click屬性為"Flase"即可。另外explode屬性是指突出顯示多遠(yuǎn)，值越大突出顯示得越遠(yuǎn)。
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="Pie">
5. <data>
6. <series name="Year 2003" palette="Default">
7. <point name="Department Stores" y="637166" />
8. <point name="Discount Stores" y="721630" />
9. <point name="Men's/Women's Specialty Stores" y="148662"/>
10. <point name="Juvenile Specialty Stores" y="78662"/>
11. <point name="All other outlets" y="90000" />
12. </series>
13. </data>
14. <data_plot_settings>
15. <pie_series sort="Desc" explode_on_click="False" explode="10"/>
16. </data_plot_settings>
17. </chart>
18. </charts>
19.</anychart>
標(biāo)記圖其實(shí)是指圖上打小點(diǎn)這樣的標(biāo)記而組成的圖，我的項(xiàng)目里用過(guò)一次，用于表示不同時(shí)間段用戶登錄次數(shù)和在線時(shí)長(zhǎng)的。
廢話不多說(shuō)，先上XML，看下面的代碼：其中<marker_series>是可以不用寫的，這里寫了就給大家做個(gè)解釋，<marker>的size屬性表示標(biāo)志在圖上的默認(rèn)大小，而<hover>;下面的marker size是標(biāo)識(shí)鼠標(biāo)移動(dòng)到標(biāo)志上時(shí)標(biāo)志顯示的大小，下面代碼從10變成20有一種放大的效果。
而設(shè)置標(biāo)志圖的代碼也只有兩塊，一塊是設(shè)置plot_type另一塊是設(shè)置default_series_type為"Marker"即可。
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="CategorizedVertical">
5. <data_plot_settings default_series_type="Marker">
6. <marker_series>
7. <marker_style>
8. <marker size="10" />
9. <states>
10. <hover>
11. <marker size="20" />
12. </hover>
13. </states>
14. </marker_style>
15. </marker_series>
16. </data_plot_settings>
17. <data>
18. <series name="ACME">
19. <point name="2000" y="1100" />
20. <point name="2001" y="880" />
21. <point name="2002" y="1100" />
22. <point name="2003" y="1500" />
23. <point name="2004" y="921" />
24. <point name="2005" y="1000" />
25. <point name="2006" y="1400" />
26. </series>
27. </data>
28. </chart>
29. </charts>
30.</anychart>
面積圖的配置與前面的也是非常類似的，除了配置plog_type以外，再配置default_series_type即可，如下所示。
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="CategorizedVertical">
5. <data_plot_settings default_series_type="Area" />
6. <data>
7. <series name="2004 Sales">
8. <point name="January" y="12000" />
9. <point name="February" y="15000" />
10. <point name="March" y="16000" />
11. <point name="April" y="15000" />
12. <point name="May" y="14000" />
13. </series>
14. </data>
15. </chart>
16. </charts>
17.</anychart>
雷達(dá)圖的應(yīng)用場(chǎng)景通常是統(tǒng)計(jì)某個(gè)人的多維能力值，通過(guò)雷達(dá)圖能很形象看出這個(gè)人的擅長(zhǎng)和需要彌補(bǔ)的地方。
雷達(dá)圖的配置也是非常簡(jiǎn)單，用戶只需要配置<chart>標(biāo)簽的plot_type屬性為Radar即可
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="Radar">
5. <data>
6. <series name="Spendings">
7. <point name="Administration" y="22" />
8. <point name="Sales" y="34" />
9. <point name="Marketing" y="16" />
10. <point name="Research" y="12" />
11. <point name="Support" y="38" />
12. <point name="Development" y="47" />
13. </series>
14. </data>
15. </chart>
16. </charts>
17.</anychart>
雷達(dá)圖有很多種樣式，雷達(dá)圖點(diǎn)與點(diǎn)之間是通過(guò)直接連接的，如果希望以曲線連接則需要設(shè)置<radar>標(biāo)簽的 use_polar_coords屬性為"true"，如下代碼
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="Radar">
5. <data>
6. <series name="Spendings">
7. <point name="Administration" y="22" />
8. <point name="Sales" y="34" />
9. <point name="Marketing" y="16" />
10. <point name="Research" y="12" />
11. <point name="Support" y="38" />
12. <point name="Development" y="47" />
13. </series>
14. </data>
15. <data_plot_settings>
16. <radar use_polar_coords="true" />
17. </data_plot_settings>
18. </chart>
19. </charts>
20.</anychart>
那么如果你希望你的雷達(dá)圖中的連線像面積圖那樣顯示，那么可以像下面這樣在<series>標(biāo)簽增加一個(gè)type屬性"Area"
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="Radar">
5. <data>
6. <series name="Spendings" type="Area">
7. <point name="Administration" y="22" />
8. <point name="Sales" y="34" />
9. <point name="Marketing" y="16" />
10. <point name="Research" y="12" />
11. <point name="Support" y="38" />
12. <point name="Development" y="47" />
13. </series>
14. </data>
15. </chart>
16. </charts>
17.</anychart>
當(dāng)然，Anychart的雷達(dá)圖支持的效果不止這些，如果需要更多的樣式，請(qǐng)參見(jiàn)官方的
堆疊圖（柱狀為例）（Stacked Bar/Column Chart）
Anychart支持柱狀的堆疊和面積圖的堆疊，這里就只介紹柱狀的堆疊，面積的堆疊與之類似。當(dāng)然也可以參見(jiàn)官方的幫助文檔：
下面是一個(gè)簡(jiǎn)單的堆疊圖，需要注意的是堆疊圖比如是存在多個(gè)series的，每個(gè)series你可以當(dāng)作一組分類，每個(gè)series下的point指標(biāo)數(shù)量都是相同的，并且他們的name一一對(duì)應(yīng)，最后你看到的效果就會(huì)是相同name的指標(biāo)堆疊在一起了。
柱狀堆疊圖與常規(guī)的柱狀圖唯一的區(qū)別就是在<y_axis>標(biāo)簽下有一個(gè)<scale mode="Stacked" />，這個(gè)標(biāo)簽決定了柱狀圖是以堆疊還是以常規(guī)顯示。
1.<?xml version="1.0" encoding="UTF-8"?>
2.<anychart>
3. <charts>
4. <chart plot_type="CategorizedVertical">
5. <data_plot_settings default_series_type="Bar"/>
6. <data>
7. <series name="Ice Cream">
8. <point name="Winter" y="12000" />
9. <point name="Spring" y="13000" />
10. <point name="Summer" y="25000" />
11. <point name="Autumn" y="16000" />
12. </series>
13. <series name="Chocolate Bars">
14. <point name="Winter" y="12000" />
15. <point name="Spring" y="12000" />
16. <point name="Summer" y="15000" />
17. <point name="Autumn" y="16000" />
18. </series>
19. <series name="Coke">
20. <point name="Winter" y="10000" />
21. <point name="Spring" y="17000" />
22. <point name="Summer" y="19000" />
23. <point name="Autumn" y="16000" />
24. </series>
25. </data>
26. <chart_settings>
27. <axes>
28. <y_axis>
29. <scale mode="Stacked" />
30. </y_axis>
31. </axes>
32. </chart_settings>
33. </chart>
34. </charts>
35.</anychart>
最后我們看相同data的情況下，堆疊圖和常規(guī)柱狀圖的效果：
標(biāo)簽：
anychart
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
半島外圍網(wǎng)上直營(yíng) 
19次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線