AnyChart除了常規圖以外，還支持儀表圖----表盤形、溫度計類型等，我們在項目進度管理的統計中用到了儀表盤，效果非常不錯。

?

• 第一個儀表盤

第一步，創建一個簡易的儀表盤

?

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

?

?

?

第二步，設置Scale和Title標簽，Scale標簽的minimum屬性表示儀表的起始值，maximum表示儀表的結束值，major_interval表示多少個值一個大刻度，minor_interval表示多少個值一個小刻度。

?start_angle表示6點鐘方向起，順時針多少度為0度點，如下值設置為" 90 "表示6點鐘順時針90度，那么就是9點鐘方向為minimum起點。

sweep_angle表示環繞整個圓圈多少度，如下設置"180"表示環繞180度，而如果設置為"360"的話其實就是一塊表的樣子，只是起點是從9點開始的。

      <?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>
    

?

?

第三步，Labels和Tickmarks，Labels是文字提示，可以自定義文字信息顯示在刻度上，而minor_tickmark如果設置enabled為false則表示不顯示詳細的小刻度。

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

?

?

第四步，設置顏色Color Ranges，如下代碼設置了三種顏色，0到40刻度綠色、40到80黃色、80到120紅色。

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

?

?

下一步按照文檔來說，應該是設置marker的，但是我覺得作用不大，就跳過了。

第五步，設置指針值Pointer

儀表圖的刻度有了，那么自然需要有指針來顯示儀表的值，這時就需要pointer標簽了，pointer標簽的屬性大家一看應該都懂。

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

?
（圖上的藍色五角星是設置marker的效果，大家不必關注）
?

只要實現以上五步，一個基本的儀表圖就出來了。以上內容摘自官方 幫助文檔 ，大家可以到那里去了解更詳細的內容。

?

最后介紹兩個增值功能：動畫效果和穿透事件。

AnyChart支持圖表指針pointer的動畫，你只需要在pointer標簽中設置動畫標簽即可，想了解更多，請參見 官方文檔

      <pointer type="Needle" value="70">
  <animation enabled="true" start_time="0" duration="3" />
</pointer>
    

?

儀表圖也支持穿透事件，穿透點是pointer指針，開發定義好event事件之后即可點擊指針進行穿透操作，不過因為儀表圖不像常規圖那樣有id屬性，所以我將穿透的URL定義在name上面同樣很好用：e.data.name

?