anychart说明文档

   今天学习anychart，在慧都控件网上看有关文档，模仿试着做了个demo，发现慧都空间网的“Flash图表AnyChart应用教程六：创建圆形仪表”里的指针“<pointertype="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 basiccircular gauge step by step, trying to cover all major elements andpointing to the articles for the further tuning a gauge.

So, a Circular Gauge is as minimum a radial scale that sweepsany angle from 0 to 360 degrees and a pointer, Needle or Knob thatindicates values on that scale. Gauge scale is usually colored foreasy value quality distinction.

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

Note: in this sampleAnyChart.swf is used, but you can optimize thepage 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 CircularGauge

First of all we need to choose a gauge type, in this sample itshould 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 AnyChartjust to create one circular gauge, as a result we get the followingoutput:

Live Sample:  SampleCircular Gauge Step 1

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

Step 2. Scale Settings and Title

Now we will define the scale of the gauge, let's say that ourspeedometer 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        <title>

07          <text><![CDATA[MPHSpeedometer]]></text>

08        </title>

09      </chart_settings>

10      <circular>

11        <axisradius="50"start_angle="90"sweep_angle="180">

12          <scaleminimum="0"maximum="120"major_interval="20"minor_interval="5"/>

13        </axis>

14      </circular>

15    </gauge>

16  </gauges>

17</anychart>

<?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>

Note: <axisradius="50"> means that we want gauge axisto cover 50% percents of a gauge size - to understand this betteryou need to study Positioning, Resizing and Axis Overview Tutorials. start_angle sets the angle fromwhich your scale should be drawn. The point from which thecalculation starts is in the lowest points of your circular gaugeand the direction is CW. sweep_angle is an actual angle ofyour circular gauge. In our example we will create a so-called"semi-radial" 180 degrees speedometer.

Now we will see the following result:

Live Sample:  SampleCircular Gauge Step 2

We have created a semi-radial speedometer. However if you wantyour speedometer to remain circular you should set typeattribute of frame node to "circular". By default it is setto "Auto" and crops unused space.

Step 3. Labels andTickmarks

When the scale is ready we can set how labels and tickmarks, wewill remove decimal digits from labels and minor tickmarks. We alsoadd a "mph" suffix to our labels. Only axis node is shown forbetter comprehension:

XML Syntax

• XML Code

01<axisradius="50"start_angle="90"sweep_angle="180">

02  <scaleminimum="0"maximum="120"major_interval="20"minor_interval="5"/>

03  <labelsenabled="true">

04    <fontbold="true"/>

05    <format><![CDATA[{%Value}{numDecimals:0}mph]]></format>

06  </labels>

07  <minor_tickmarkenabled="false"/>

08</axis>

<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>

Now the scale looks this way:

Live Sample:  SampleCircular Gauge Step 3

Step 4. Color Ranges

An essential part of linear gauges are color ranges that areused to distinct the quality of value shown, in our example we willcreate three color ranges "Slow", "Average" and "Fast" speedlevels. The syntax should be as follows:

XML Syntax

• XML Code

01<axisradius="50"start_angle="90"sweep_angle="180">

02  <scaleminimum="0"maximum="120"major_interval="20"minor_interval="5"/>

03  <scale_barenabled="false"/>

04  <labelsenabled="true">

05    <fontbold="true"/>

06    <format><![CDATA[{%Value}{numDecimals:0}mph]]></format>

07  </labels>

08  <minor_tickmarkenabled="false"/>

09  <color_ranges>

10    <color_rangestart="0"end="40"color="Green"/>

11    <color_rangestart="40"end="80"color="Yellow"/>

12    <color_rangestart="80"end="120"color="Red"/>

13  </color_ranges>

14</axis>

<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>

Here we are - our gauge is colored:

Live Sample:  SampleCircular Gauge Step 4

Note that as we have added color ranges we no longer needscale_bar. So we have disabled it.

Step 5. Adding Markers

Also, it may be useful to point our some special point, forexample, the optimal speed, we can so that with the custom axislabels, that can have a custom tickmark.

XML Syntax

• XML Code

01<axis>

02  <scaleminimum="0"maximum="100"major_interval="10"minor_interval="2"/>

03  <labelsenabled="true">

04    <fontbold="true"/>

05    <format><![CDATA[{%Value}{numDecimals:0}]]></format>

06  </labels>

07  <minor_tickmarkenabled="false"/>

08  <custom_labels>

09    <custom_labelvalue="65"enabled="true">

10      <labelenabled="true"align="Outside"padding="20">

11        <format><![CDATA[Optimal]]></format>

12      </label>

13      <tickmarkenabled="true"shape="Star5"auto_rotate="false"width="10"length="10"align="Inside"padding="-12">

14        <fillcolor="Blue"/>

15        <bordercolor="DarkColor(Yellow)"/>

16      </tickmark>

17    </custom_label>

18  </custom_labels>

19</axis>

<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" width="10" length="10" align="Inside" padding="-12"> <fill color="Blue" /> <border color="DarkColor(Yellow)" /> </tickmark> </custom_label> </custom_labels></axis>

Now we can clearly see optimal speed on the gauge.

Live Sample:  SampleCircular Gauge Step 5

Step 6. Pointer

One of the last, but one of the main parts of a gauge is apointer - there are several ways to display it, but we will choosethe most typical for this type of the gauges (all previously setnodes are left apart in the snippet):

XML Syntax

• XML Code

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

02<anychart>

03  <gauges>

04    <gauge>

05      <circular>

06        <pointers>

07          <pointertype="bar"value="35"color="Gray"/>

08        </pointers>

09      </circular>

10    </gauge>

11  </gauges>

12</anychart>

<?xml version="1.0" encoding="UTF-8"?><anychart> <gauges> <gauge> <circular> <pointers> <pointer type="bar" value="35" color="Gray" /> </pointers> </circular> </gauge> </gauges></anychart>

Now the current sales level is shown, as you can see from thesyntax you can place several pointers on one gauge, they can be ofa different shape and placed differently (this fact, by the way,allows to create the Bullet Graphs with AnyChart easily):

Live Sample:  SampleCircular Gauge Step 6

Note that the view of our needle pointer is far from the ideal.We have simply changed its color without thoroughly examining itsnumerous attributes. For further information refer to Pointers Tutorial.

Step 7. Tuning frame and Margins

The final step in gauge creation is the definition of a frameand setting up margins. Frame is a complex graphical element thatallows to display really nice-looking gauge. We will remove ageneral chart background and border, remove margins. Theframe by default is enabled and has inner_stroke andouter_stroke. If you want you can disable your frameby setting "False" value to enabled attribute.

XML Syntax

• XML Code

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

02<anychart>

03  <marginall="5"/>

04  <gauges>

05    <gauge>

06      <chart_settings>

07        <title>

08          <text><![CDATA[MPHSpeedometer]]></text>

09        </title>

10        <chart_backgroundenabled="false">

11          <borderenabled="false"/>

12        </chart_background>

13      </chart_settings>

14    </gauge>

15  </gauges>

16</anychart>

<?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>

And here is an output we get:

Live Sample:  SampleCircular Gauge Step 7

Final Mph Speedometer Gauge is Ready

Now you know almost all basic settings and configurations of thecircular gauge, you can go on studying a lot of other parametersthat can be changed to create a gauge that will display the data ofyour choice in a right way.

If you haven't studied any other articles in documentation yetwe recommend you to start with the following:

• Architecture
• Positioning
• Resizing
• Visual Appearance
• Axis

Current Page Online URL: Your first circular gauge