你必须要了解的创建anychart仪表的几个流程

　　AnyChart是一款灵活的Flash/JavaScript (HTML5)图表控件，可创建跨平台和跨浏览器的交互式图表和仪表。在中讲述创建图表的步骤，今天，我们将从添加和配置仪表要素开始一步一步介绍如何使用anychart控件来创建仪表gauge。

　　Step 1、创建Circular Gauge

　　在创建仪表之前，我们需要选择仪表类型，在本示例中我们选择Circular Gauge，接着我们通过以下代码便可创建一个Circular Gauge：

　　01
02
03
04
05
06
07

　　Circular Gauge效果如下：

　　 

　　从上图可以看见，在默认情况下，gauge没有指针也没有360度刻度。若你想重新生成gauge时，注意为AnyChart 对象设置合适的大小（height="300" width="300"）。虽然，AnyChart仪表可以调整大小，但是如果你想在chart中创建一个circular gauge，你最好在开始的时候就将宽和高设置成相等。

　　Step 2. 刻度设置和刻度标题

　　在本示例中将circular gauge设置成一个半圆形的速度计。

01
02
03
04
05
06
09
10
11
12
13
14
15
16
17

　　注意：1、意思意味着gauge axis占gauge大小的50%;
2、start_angle设置起始角度。
3、sweep_angle设置circular gauge的实际角度。

　　效果图如下：

　　 

　　如果你想速度计保持圆形，你可以将框架节点的类型属性设置成"circular"

　　Step 3. 标签和刻度线

　　刻度设置好了，接下来可以设置标签和刻度线了。在本示例中，我们为标签添加了"mph" 后缀。

01
02
03
04
05
06
07
08

　　circular gauge变成了如下的效果：

　　Step 4. 颜色范围

　　线性仪表至关重要的一部分就是颜色范围，用不同的颜色范围区分不同的值。在本示例中，我们要创建三个颜色来区分“慢”“一般”“快”这三个速度级别。

01
02
03
04
05
06
07
08
09
10
11
12
13
14

　　效果图如下：

　　 

　　Step 5. 添加标记

　　标记可用来指定一些特殊的点，例如，最佳速度，通过自定义轴标签来定制一个标记。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19

　　 

　　Step 6. 指针

　　指针是gauge的一个非常重要的部分，接下来我们就开始定义指针部分：

01
02
03
04
05
06
07
08
09
10
11
12

　　Step 7. 调整框架和边界

　　创建gauge的最后一步就是定义框架和边界。代码如下：

01
02
03
04
05
06
07
10
11
12
13
14
15
16

　　效果图如下：

　　 

下载Anychart Flash Chart：