anychart说明文档

   今天学习anychart，在慧都控件网上看有关文档，模仿试着做了个demo，发现慧都空间网的“Flash图表AnyChart应用教程六：创建圆形仪表”里的指针“<pointer type="bar" value="35" color="Gray" />”有误，应该为：type="needle"。还是看英文原文可靠啊！附英文文档网址：http://www.anychart.com/products/anychart/docs/users-guide/index.html?gauges.html

Your first circular gauge

• Overview
• Step 1. Basic Gauge - Creating Circular Gauge
• Step 2. Scale Settings and Title
• Step 3. Labels and Tickmarks
• Step 4. Color Ranges
• Step 5. Adding Markers
• Step 6. Pointer
• Step 7. Tuning frame and Margins
• Final. Monthly Sales Gauge is Ready

Overview

In this tutorial we will go through the creation of the basic circular gauge step by step, trying to cover all major elements and pointing to the articles for the further tuning a gauge.

So, a Circular Gauge is as minimum a radial scale that sweeps any angle from 0 to 360 degrees and a pointer, Needle or Knob that indicates values on that scale. Gauge scale is usually colored for easy value quality distinction.

We will start from the scratch adding or configuring gauge elements on the each step, as a result we will create a typical speedometer gauge.

Note: in this sample AnyChart.swf is used, but you can optimize the page with selected chart type if you use custom type dependent swf. These swfs are described in SWFs Guide.

Gauge Sample:

• Launch the sample
• Download the sample

Step 1. Basic Gauge - Creating Circular Gauge

First of all we need to choose a gauge type, in this sample it should be circular gauge, so we put the following XML settings:

XML Syntax

• XML Code

01	<?xml version="1.0" encoding="UTF-8"?>

02	<anychart>

03

<gauges>

04

<gauge>

05	<circular />

06

</gauge>

07

</gauges>

08	</anychart>

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

As you can clearly see from this XML Snippet we tell AnyChart just to create one circular gauge, as a result we get the following output:

Live Sample:    Sample Circular Gauge Step 1

As you can see, by default gauge has no pointers and some default 360 degrees scale with labels and tickmarks, when trying to recreate this sample please note that you should set appropriate size for AnyChart object in you page (height="300" width="300" in our sample). AnyChart Gauges can be resized, but if you want to create the chart with a single circular gauge on it - it is recommended to start with width that is equal to the height.

Step 2. Scale Settings and Title

Now we will define the scale of the gauge, let's say that our speedometer shows value from 0 to 120 miles per hour.

Let's put this into XML:

XML Syntax

• XML Code

01	<?xml version="1.0" encoding="UTF-8"?>

02	<anychart>

03

<gauges>

04

<gauge>

05	<chart_settings>

06