AnyChart除了常規(guī)圖以外，還支持儀表圖----表盤形、溫度計(jì)類型等，我們在項(xiàng)目進(jìn)度管理的統(tǒng)計(jì)中用到了儀表盤，效果非常不錯(cuò)。

?

• 第一個(gè)儀表盤

第一步，創(chuàng)建一個(gè)簡易的儀表盤

?

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

?

?

?

第二步，設(shè)置Scale和Title標(biāo)簽，Scale標(biāo)簽的minimum屬性表示儀表的起始值，maximum表示儀表的結(jié)束值，major_interval表示多少個(gè)值一個(gè)大刻度，minor_interval表示多少個(gè)值一個(gè)小刻度。

?start_angle表示6點(diǎn)鐘方向起，順時(shí)針多少度為0度點(diǎn)，如下值設(shè)置為" 90 "表示6點(diǎn)鐘順時(shí)針90度，那么就是9點(diǎn)鐘方向?yàn)閙inimum起點(diǎn)。

sweep_angle表示環(huán)繞整個(gè)圓圈多少度，如下設(shè)置"180"表示環(huán)繞180度，而如果設(shè)置為"360"的話其實(shí)就是一塊表的樣子，只是起點(diǎn)是從9點(diǎn)開始的。

      <?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如果設(shè)置enabled為false則表示不顯示詳細(xì)的小刻度。

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

?

?

第四步，設(shè)置顏色Color Ranges，如下代碼設(shè)置了三種顏色，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>
    

?

?

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

第五步，設(shè)置指針值Pointer

儀表圖的刻度有了，那么自然需要有指針來顯示儀表的值，這時(shí)就需要pointer標(biāo)簽了，pointer標(biāo)簽的屬性大家一看應(yīng)該都懂。

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

?
（圖上的藍(lán)色五角星是設(shè)置marker的效果，大家不必關(guān)注）
?

只要實(shí)現(xiàn)以上五步，一個(gè)基本的儀表圖就出來了。以上內(nèi)容摘自官方 幫助文檔 ，大家可以到那里去了解更詳細(xì)的內(nèi)容。

?

最后介紹兩個(gè)增值功能：動(dòng)畫效果和穿透事件。

AnyChart支持圖表指針pointer的動(dòng)畫，你只需要在pointer標(biāo)簽中設(shè)置動(dòng)畫標(biāo)簽即可，想了解更多，請參見 官方文檔

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

?

儀表圖也支持穿透事件，穿透點(diǎn)是pointer指針，開發(fā)定義好event事件之后即可點(diǎn)擊指針進(jìn)行穿透操作，不過因?yàn)閮x表圖不像常規(guī)圖那樣有id屬性，所以我將穿透的URL定義在name上面同樣很好用：e.data.name

?