今天学习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
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:
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:
01 |
<?xml version="1.0"
encoding="UTF-8"?> |
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:
01 |
<?xml version="1.0"
encoding="UTF-8"?> |
07 |
< text > <![CDATA[ MPH
Speedometer ]]> </ text > |
11 |
< axis
radius = "50"
start_angle = "90"
sweep_angle = "180" > |
12 |
< scale
minimum = "0"
maximum = "120"
major_interval = "20"
minor_interval = "5"
/> |
Note: <axis
radius="50"> means that we want gauge axis
to cover 50% percents of a gauge size - to understand this better
you need to study
Positioning,
Resizing and
Axis Overview Tutorials. start_angle sets the angle from
which your scale should be drawn. The point from which the
calculation starts is in the lowest points of your circular gauge
and the direction is CW. sweep_angle is an actual angle of
your 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: Sample
Circular Gauge Step 2
We have created a semi-radial speedometer. However if you want
your speedometer to remain circular you should set type
attribute of frame node to "circular". By default it is set
to "Auto" and crops unused space.
Step 3. Labels and
Tickmarks
When the scale is ready we can set how labels and tickmarks, we
will remove decimal digits from labels and minor tickmarks. We also
add a "mph" suffix to our labels. Only axis node is shown for
better comprehension:
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" > |
05 |
< format > <![CDATA[ {%Value}{numDecimals:0}
mph ]]> </ format > |
07 |
< minor_tickmark
enabled = "false"
/> |
Now the scale looks this way:
Live Sample: Sample
Circular Gauge Step 3
Step 4. Color Ranges
An essential part of linear gauges are color ranges that are
used to distinct the quality of value shown, in our example we will
create three color ranges "Slow", "Average" and "Fast" speed
levels. The syntax should be as follows:
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" > |
06 |
< format > <![CDATA[ {%Value}{numDecimals:0}
mph ]]> </ format > |
08 |
< minor_tickmark
enabled = "false"
/> |
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"
/> |
Here we are - our gauge is colored:
Live Sample: Sample
Circular Gauge Step 4
Note that as we have added color ranges we no longer need
scale_bar. So we have disabled it.
Step 5. Adding Markers
Also, it may be useful to point our some special point, for
example, the optimal speed, we can so that with the custom axis
labels, that can have a custom tickmark.
02 |
< scale
minimum = "0"
maximum = "100"
major_interval = "10"
minor_interval = "2"
/> |
03 |
< labels
enabled = "true" > |
05 |
< format > <![CDATA[ {%Value}{numDecimals:0} ]]> </ format > |
07 |
< minor_tickmark
enabled = "false"
/> |
09 |
< custom_label
value = "65"
enabled = "true" > |
10 |
< label
enabled = "true"
align = "Outside"
padding = "20" > |
11 |
< format > <![CDATA[ Optimal ]]> </ format > |
13 |
< tickmark
enabled = "true"
shape = "Star5"
auto_rotate = "false"
width = "10"
length = "10"
align = "Inside"
padding = "-12" > |
15 |
< border
color = "DarkColor(Yellow)"
/> |
Now we can clearly see optimal speed on the gauge.
Live Sample: Sample
Circular Gauge Step 5
Step 6. Pointer
One of the last, but one of the main parts of a gauge is a
pointer - there are several ways to display it, but we will choose
the most typical for this type of the gauges (all previously set
nodes are left apart in the snippet):
01 |
<?xml version="1.0"
encoding="UTF-8"?> |
07 |
< pointer
type = "bar"
value = "35"
color = "Gray"
/> |
Now the current sales level is shown, as you can see from the
syntax you can place several pointers on one gauge, they can be of
a different shape and placed differently (this fact, by the way,
allows to
create the Bullet Graphs with AnyChart easily):
Live Sample: Sample
Circular 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 its
numerous 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 frame
and setting up margins. Frame is a complex graphical element that
allows to display really nice-looking gauge. We will remove a
general chart background and border, remove margins. The
frame by default is enabled and has inner_stroke and
outer_stroke. If you want you can disable your frame
by setting "False" value to enabled attribute.
01 |
<?xml version="1.0"
encoding="UTF-8"?> |
08 |
< text > <![CDATA[ MPH
Speedometer ]]> </ text > |
10 |
< chart_background
enabled = "false" > |
11 |
< border
enabled = "false"
/> |
And here is an output we get:
Live Sample: Sample
Circular Gauge Step 7
Final Mph Speedometer Gauge is Ready
Now you know almost all basic settings and configurations of the
circular gauge, you can go on studying a lot of other parameters
that can be changed to create a gauge that will display the data of
your choice in a right way.
If you haven't studied any other articles in documentation yet
we recommend you to start with the following:
Current Page Online URL: Your first circular gauge