【转】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