彩票走势图

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

　　Step 1、创建Circular Gauge

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

　　01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03 <gauges>
04 <gauge>
05 <circular />
06 </gauge>
07 </gauges>

　　Circular Gauge效果如下：

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

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

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

01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03 <gauges>
04 <gauge>
05 <chart_settings>
06 <title>
07 <text><![CDATA[MPH Speedometer]]></text>
08 </title>
09 </chart_settings>
10 <circular>
11 <axis radius="50" start_angle="90" sweep_angle="180">
12 <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" />
13 </axis>
14 </circular>
15 </gauge>
16 </gauges>
17 </anychart>

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

　　效果图如下：

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

　　Step 3. 标签和刻度线

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

01 <axis radius="50" start_angle="90" sweep_angle="180">
02 <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" />
03 <labels enabled="true">
04 <font bold="true" />
05 <format><![CDATA[{%Value}{numDecimals:0} mph]]></format>
06 </labels>
07 <minor_tickmark enabled="false" />
08 </axis>

　　circular gauge变成了如下的效果：

　　Step 4. 颜色范围

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

01 <axis radius="50" start_angle="90" sweep_angle="180">
02 <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" />
03 <scale_bar enabled="false" />
04 <labels enabled="true">
05 <font bold="true" />
06 <format><![CDATA[{%Value}{numDecimals:0} mph]]></format>
07 </labels>
08 <minor_tickmark enabled="false" />
09 <color_ranges>
10 <color_range start="0" end="40" color="Green" />
11 <color_range start="40" end="80" color="Yellow" />
12 <color_range start="80" end="120" color="Red" />
13 </color_ranges>
14 </axis>

　　效果图如下：

　　Step 5. 添加标记

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

01 <axis>
02 <scale minimum="0" maximum="100" major_interval="10" minor_interval="2" />
03 <labels enabled="true">
04 <font bold="true" />
05 <format><![CDATA[{%Value}{numDecimals:0}]]></format>
06 </labels>
07 <minor_tickmark enabled="false" />
08 <custom_labels>
09 <custom_label value="65" enabled="true">
10 <label enabled="true" align="Outside" padding="20">
11 <format><![CDATA[Optimal]]></format>
12 </label>
13 <tickmark enabled="true" shape="Star5" auto_rotate="false" width="10" length="10" align="Inside" padding="-12">
14 <fill color="Blue" />
15 <border color="DarkColor(Yellow)" />
16 </tickmark>
17 </custom_label>
18 </custom_labels>
19 </axis>

　　Step 6. 指针

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

01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03 <gauges>
04 <gauge>
05 <circular>
06 <pointers>
07 <pointer type="bar" value="35" color="Gray" />
08 </pointers>
09 </circular>
10 </gauge>
11 </gauges>
12 </anychart>

　　Step 7. 调整框架和边界

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

01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03 <margin all="5" />
04 <gauges>
05 <gauge>
06 <chart_settings>
07 <title>
08 <text><![CDATA[MPH Speedometer]]></text>
09 </title>
10 <chart_background enabled="false">
11 <border enabled="false" />
12 </chart_background>
13 </chart_settings>
14 </gauge>
15 </gauges>
16 </anychart>

　　效果图如下：

下载Anychart Flash Chart：//pclwef.cn/zh-CN/product/1009/feature.aspx