Anychart图表系列八之仪表图

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