【轉】Flash圖表AnyChart應用教程六：創建圓形儀表

本教程將爲你詳細解析創建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、設置標籤和刻度標記

當刻度準備好以後，我們就開始設置標籤和刻度標記，我們將刪除標籤和刻度標記中的小數位數，添加一個"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" 和 "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圓形儀表就完成了：

 

 

 

 本文轉自：http://www.evget.com/zh-CN/info/catalog/18131.html