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

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

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

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

　　Circular Gauge效果如下：

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

　　Step 2. 刻度設置和刻度標題

　　在本示例中將circular gauge設置成一個半圓形的速度計。

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設置起始角度。
3、sweep_angle設置circular gauge的實際角度。

　　效果圖如下：

　　如果你想速度計保持圓形，你可以將框架節(jié)點的類型屬性設置成"circular"

　　Step 3. 標簽和刻度線

　　刻度設置好了，接下來可以設置標簽和刻度線了。在本示例中，我們?yōu)闃撕炋砑恿?quot;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. 顏色范圍

　　線性儀表至關重要的一部分就是顏色范圍，用不同的顏色范圍區(qū)分不同的值。在本示例中，我們要創(chuàng)建三個顏色來區(qū)分“慢”“一般”“快”這三個速度級別。

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. 添加標記

　　標記可用來指定一些特殊的點，例如，最佳速度，通過自定義軸標簽來定制一個標記。

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的一個非常重要的部分，接下來我們就開始定義指針部分：

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. 調整框架和邊界

　　創(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：//fc6vip.cn/zh-CN/product/1009/feature.aspx