本教程將為你詳細解析創建 AnyChart 圓形儀表的具體步驟，在本示例中使用了AnyChart.swf，但你也可以用自定義的swf 優化頁面。

點擊下載AnyChart創建汽車儀表盤（示例代碼）

1、創建基本的圓形儀表

首先我們需要選擇一種儀表樣式，本示例中我們創建的是圓形儀表，示例代碼如下：

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <gauges>
    <gauge>
      <circular />
    </gauge>
  </gauges>
</anychart>

從這段代碼中可以看出，我們只創建了一個圓形儀表，所以會得到下圖所示的結果：

從上圖中可以看出，默認情況下，儀表沒有指針，只有帶有標簽和刻度的360度計量表。注意，圓形儀表的寬高最好設置為等長。

2、設置刻度和標題

接下來定義儀表刻度，這個測速儀顯示每小時0到120英里的值。把這個放入XML：

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <gauges>
    <gauge>
      <chart_settings>
        <title>
          <text>MPH Speedometer</text>
        </title>
      </chart_settings>
      <circular>
        <axis radius="50" start_angle="90" sweep_angle="180">
          <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" />
        </axis>
      </circular>
    </gauge>
  </gauges>
</anychart>

注意：<axis radius="50">的意思是讓儀表軸覆蓋儀表尺寸的50%。start_angle設置你要繪制的刻度角度。sweep_angle是儀表指針的下擺角度。在本例中我們創建一個“半徑向”180度測速儀，如圖所示：

如果想讓測速儀保持循環，需將frame節點的type屬性設置為"circular"，默認情況下，它一般設置為"Auto"。

3、設置標簽和刻度標記

當刻度準備好以后，我們就開始設置標簽和刻度標記，我們將刪除標簽和刻度標記中的小數位數，添加一個&quot;mph"后綴到標簽中，示例代碼如下：

<axis radius="50" start_angle="90" sweep_angle="180">
  <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" />
  <labels enabled="true">
    <font bold="true" />
    <format>{%Value}{numDecimals:0} mph</format>
  </labels>
  <minor_tickmark enabled="false" />
</axis>

如圖所示：

4、設置顏色

儀表中一個很重要的部分是儀表的顏色，用于區分值的范圍。在本例中我們將創建三個色域"Slow", "Average&quot; 和 "Fast"，示例代碼如下：

<axis radius="50" start_angle="90" sweep_angle="180">
  <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" />
  <scale_bar enabled="false" />
  <labels enabled="true">
    <font bold="true" />
    <format>{%Value}{numDecimals:0} mph</format>
  </labels>
  <minor_tickmark enabled="false" />
  <color_ranges>
    <color_range start="0" end="40" color="Green" />
    <color_range start="40" end="80" color="Yellow" />
    <color_range start="80" end="120" color="Red" />
  </color_ranges>
</axis>

效果如圖所示：

5、添加標記

有時候我們要在刻度上作一些特殊的標記，比如最佳速度，我們可以用自定義軸標簽的方式自定義刻度標記：

<axis>
  <scale minimum="0" maximum="100" major_interval="10" minor_interval="2" />
  <labels enabled="true">
    <font bold="true" />
    <format>{%Value}{numDecimals:0}</format>
  </labels>
  <minor_tickmark enabled="false" />
  <custom_labels>
    <custom_label value="65" enabled="true">
      <label enabled="true" align="Outside" padding="20">
        <format>Optimal</format>
      </label>
      <tickmark enabled="true" shape="Star5" auto_rotate="false" width="10" length="10" align="Inside" padding="-12">
        <fill color="Blue" />
        <border color="DarkColor(Yellow)" />
      </tickmark>
    </custom_label>
  </custom_labels>
</axis>

如圖所示：

6、指針

不要忘了，還有一個重要的組成部分-指針。有幾種顯示的方式，我們選用最常用的一種方式：

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <gauges>
    <gauge>
      <circular>
        <pointers>
          <pointer type="bar" value="35" color="Gray" />
        </pointers>
      </circular>
    </gauge>
  </gauges>
</anychart>

7、調試框架和邊緣

最后一步就是框架的定義和邊緣的設置。框架是一個復雜的圖形元素，它決定了儀表外觀的好壞。在這里，我們刪除一個常用的圖表背景、邊框和邊緣。frame默認情況下是啟動的，并有 inner_stroke 和 outer_stroke。如果你想禁用frame，將enabled設置為"False"就可以了。

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <margin all="5" />
  <gauges>
    <gauge>
      <chart_settings>
        <title>
          <text>MPH Speedometer</text>
        </title>
        <chart_background enabled="false">
          <border enabled="false" />
        </chart_background>
      </chart_settings>
    </gauge>
  </gauges>
</anychart>

一個AnyChart圓形儀表就完成了：