bt之家,老司机69,午夜伦理在线视频

Anychart圖表系列三之常用圖介紹

原創|使用教程|編輯：龔雪|2015-05-15 10:47:58.000|閱讀 721 次

概述：今天給大家帶來的是Anychart各種圖的介紹，主要是教大家如何配出自己需要的圖形出來。

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。

AnyChart 可以被用于Web、桌面和移動應用程序，AnyChart 可運行于當前PC和Mac上所有主流的瀏覽器，如：Chrome, Safari, Firefox, Internet Explorer 和 Opera，并且可用于所有移動平臺(Android (2.2+) 和 iOS (iPhone, iPad, iPod Touch). )上的主流瀏覽器。

柱狀圖（Column Chart）

柱狀圖是項目中最常用的圖形之一，他的指標在X軸方向，每個指標對應的值在Y軸，Anychart的柱狀圖支持2D和3D效果。

如下代碼片段，是一個簡單的柱狀圖的XML配置，要生成一個柱狀圖，你就必須配置<chart>的plot_type屬性為"CategorizedVertical"，并且要配置<data_plot_settings>標簽的屬性default_series_type為"Bar"，這樣整個圖就是柱狀了。

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>

條形圖（Bar Chart）

條形圖其實是柱狀圖旋轉后的效果，指標在Y軸了，而數據在X軸，同時條形圖也支持2D和3D效果。

條形圖的配置與柱狀圖也非常類似，你只需要把柱狀圖的plot_type屬性修改為"CategorizedHorizontal"即可顯示成條形圖。

Xml代碼

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>

線形圖（Line Chart）

線形圖分折線圖和曲線圖，常用于數據發展趨勢分析。

看下面的代碼片段，這是配置折線圖的方法，你就必須配置<chart>的plot_type屬性為"CategorizedVertical"，并且要配置<data_plot_settings>標簽的屬性default_series_type為"Line"，這樣整個圖就是折線圖了。那么如果你將plot_type屬性設置成"CategorizedHorizontal"，結果也是折線，只是折線的指標在Y軸，而數據在X軸了。

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="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"即可，看下面代碼

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="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>

餅圖和圓環圖（Pie and Donut Chart）

餅狀圖在項目中應用也很廣泛，主要用于展示指標占用比例，Anychart的餅圖也支持2D和3D兩種。

餅圖的代碼如下，不同于前面幾種圖，餅狀圖只需要配置<chart>的plot_type屬性為"Pie"即可。

Xml代碼

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>

圓環圖也是非常簡單，只需要配置<chart>的plot_type屬性為"Doughnut"即可

Xml代碼

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>

介紹餅狀圖的一個特殊功能：Exploded Slices。餅圖默認如果被點擊的話，被點擊的部分會伸出來突出顯示。而且你也可以設置圖形顯示時默認突出顯示哪一塊或哪幾塊。

如下面的代碼，我設置了point name為Department開頭的和All開頭的兩個指標屬性exploded為"true"，那么結果就是渲染餅圖后，這兩個被設置的指標突出向外顯示了。

Xml代碼

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>

不過Anychart的餅圖突出顯示有一個不滿意的地方就是你選擇了一塊突出顯示后，再選擇別的指標，原來被選擇的指標不會自動收回。

另外有的用戶不希望點擊餅圖時突出顯示，則需要配置一個<pie_series>標簽并且設置explode_on_click屬性為"Flase"即可。另外explode屬性是指突出顯示多遠，值越大突出顯示得越遠。

Xml代碼

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>

標記圖（Marker Chart）

標記圖其實是指圖上打小點這樣的標記而組成的圖，我的項目里用過一次，用于表示不同時間段用戶登錄次數和在線時長的。

廢話不多說，先上XML，看下面的代碼：其中<marker_series>是可以不用寫的，這里寫了就給大家做個解釋，<marker>的size屬性表示標志在圖上的默認大小，而<;hover>下面的marker size是標識鼠標移動到標志上時標志顯示的大小，下面代碼從10變成20有一種放大的效果。

而設置標志圖的代碼也只有兩塊，一塊是設置plot_type另一塊是設置default_series_type為"Marker"即可。

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="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>

面積圖（Area Chart）

面積圖的配置與前面的也是非常類似的，除了配置plog_type以外，再配置default_series_type即可，如下所示。

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="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>

雷達圖（Radar Chart）

雷達圖的應用場景通常是統計某個人的多維能力值，通過雷達圖能很形象看出這個人的擅長和需要彌補的地方。

雷達圖的配置也是非常簡單，用戶只需要配置<chart>標簽的plot_type屬性為Radar即可

Xml代碼

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>

雷達圖有很多種樣式，雷達圖點與點之間是通過直接連接的，如果希望以曲線連接則需要設置<radar>標簽的 use_polar_coords屬性為"true"，如下代碼

Xml代碼

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>

那么如果你希望你的雷達圖中的連線像面積圖那樣顯示，那么可以像下面這樣在<series>標簽增加一個type屬性"Area"

Xml代碼

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>

當然，Anychart的雷達圖支持的效果不止這些，如果需要更多的樣式，請參見官方的

堆疊圖（柱狀為例）（Stacked Bar/Column Chart）

Anychart支持柱狀的堆疊和面積圖的堆疊，這里就只介紹柱狀的堆疊，面積的堆疊與之類似。當然也可以參見官方的幫助文檔：

下面是一個簡單的堆疊圖，需要注意的是堆疊圖比如是存在多個series的，每個series你可以當作一組分類，每個series下的point指標數量都是相同的，并且他們的name一一對應，最后你看到的效果就會是相同name的指標堆疊在一起了。

柱狀堆疊圖與常規的柱狀圖唯一的區別就是在<y_axis>標簽下有一個<scale mode="Stacked" />，這個標簽決定了柱狀圖是以堆疊還是以常規顯示。

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.      <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的情況下，堆疊圖和常規柱狀圖的效果：