AnyChart是一款靈活的Flash/JavaScript (HTML5)圖表控件，可創(chuàng)建跨平臺(tái)和跨瀏覽器的交互式圖表和儀表。在《使用Anychart控件創(chuàng)建flash圖表的步驟》中講述創(chuàng)建圖表的步驟，今天，我們將從添加和配置儀表要素開(kāi)始一步一步介紹如何使用anychart控件來(lái)創(chuàng)建儀表gauge。

　　Step 1、創(chuàng)建Circular Gauge

　　在創(chuàng)建儀表之前，我們需要選擇儀表類(lèi)型，在本示例中我們選擇Circular Gauge，接著我們通過(guò)以下代碼便可創(chuàng)建一個(gè)Circular Gauge：

　　01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03 <gauges>
04 <gauge>
05 <circular />
06 </gauge>
07 </gauges>

　　Circular Gauge效果如下：

　　從上圖可以看見(jiàn)，在默認(rèn)情況下，gauge沒(méi)有指針也沒(méi)有360度刻度。若你想重新生成gauge時(shí)，注意為AnyChart 對(duì)象設(shè)置合適的大小（height="300" width="300"）。雖然，AnyChart儀表可以調(diào)整大小，但是如果你想在chart中創(chuàng)建一個(gè)circular gauge，你最好在開(kāi)始的時(shí)候就將寬和高設(shè)置成相等。

　　Step 2. 刻度設(shè)置和刻度標(biāo)題

　　在本示例中將circular gauge設(shè)置成一個(gè)半圓形的速度計(jì)。

01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03 <gauges>
04 <gauge>
05 <chart_settings>
06 <title>
07 <text><![CDATA[MPH Speedometer]]></text>
08 </title>
09 </chart_settings>
10 <circular>
11 <axis radius="50" start_angle="90" sweep_angle="180">
12 <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" />
13 </axis>
14 </circular>
15 </gauge>
16 </gauges>
17 </anychart>

　　注意：1、<axis radius="50">意思意味著gauge axis占gauge大小的50%;
2、start_angle設(shè)置起始角度。
3、sweep_angle設(shè)置circular gauge的實(shí)際角度。

　　效果圖如下：

　　如果你想速度計(jì)保持圓形，你可以將框架節(jié)點(diǎn)的類(lèi)型屬性設(shè)置成"circular";

　　Step 3. 標(biāo)簽和刻度線

　　刻度設(shè)置好了，接下來(lái)可以設(shè)置標(biāo)簽和刻度線了。在本示例中，我們?yōu)闃?biāo)簽添加了"mph" 后綴。

01 <axis radius="50" start_angle="90" sweep_angle="180">
02 <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" />
03 <labels enabled="true">
04 <font bold="true" />
05 <format><![CDATA[{%Value}{numDecimals:0} mph]]></format>
06 </labels>
07 <minor_tickmark enabled="false" />
08 </axis>

　　circular gauge變成了如下的效果：

　　Step 4. 顏色范圍

　　線性?xún)x表至關(guān)重要的一部分就是顏色范圍，用不同的顏色范圍區(qū)分不同的值。在本示例中，我們要?jiǎng)?chuàng)建三個(gè)顏色來(lái)區(qū)分“慢”“一般”“快”這三個(gè)速度級(jí)別。

01 <axis radius="50" start_angle="90" sweep_angle="180">
02 <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" />
03 <scale_bar enabled="false" />
04 <labels enabled="true">
05 <font bold="true" />
06 <format><![CDATA[{%Value}{numDecimals:0} mph]]></format>
07 </labels>
08 <minor_tickmark enabled="false" />
09 <color_ranges>
10 <color_range start="0" end="40" color="Green" />
11 <color_range start="40" end="80" color="Yellow" />
12 <color_range start="80" end="120" color="Red" />
13 </color_ranges>
14 </axis>

　　效果圖如下：

　　Step 5. 添加標(biāo)記

　　標(biāo)記可用來(lái)指定一些特殊的點(diǎn)，例如，最佳速度，通過(guò)自定義軸標(biāo)簽來(lái)定制一個(gè)標(biāo)記。

01 <axis>
02 <scale minimum="0" maximum="100" major_interval="10" minor_interval="2" />
03 <labels enabled="true">
04 <font bold="true" />
05 <format><![CDATA[{%Value}{numDecimals:0}]]></format>
06 </labels>
07 <minor_tickmark enabled="false" />
08 <custom_labels>
09 <custom_label value="65" enabled="true">
10 <label enabled="true" align="Outside" padding="20">
11 <format><![CDATA[Optimal]]></format>
12 </label>
13 <tickmark enabled="true" shape="Star5" auto_rotate="false" width="10" length="10" align="Inside" padding="-12">
14 <fill color="Blue" />
15 <border color="DarkColor(Yellow)" />
16 </tickmark>
17 </custom_label>
18 </custom_labels>
19 </axis>

　　Step 6. 指針

　　指針是gauge的一個(gè)非常重要的部分，接下來(lái)我們就開(kāi)始定義指針部分：

01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03 <gauges>
04 <gauge>
05 <circular>
06 <pointers>
07 <pointer type="bar" value="35" color="Gray" />
08 </pointers>
09 </circular>
10 </gauge>
11 </gauges>
12 </anychart>

　　Step 7. 調(diào)整框架和邊界

　　創(chuàng)建gauge的最后一步就是定義框架和邊界。代碼如下：

01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03 <margin all="5" />
04 <gauges>
05 <gauge>
06 <chart_settings>
07 <title>
08 <text><![CDATA[MPH Speedometer]]></text>
09 </title>
10 <chart_background enabled="false">
11 <border enabled="false" />
12 </chart_background>
13 </chart_settings>
14 </gauge>
15 </gauges>
16 </anychart>

　　效果圖如下：

下載Anychart Flash Chart：//ke049m.cn/zh-CN/product/1009/feature.aspx