FusionCharts各项配置参数的文档(珍贵,找了好久才找倒)

http://www.fusioncharts.com/Gallery/Default.asp 官方调用演示

Using Various Chart Properties

We can use lots of properties to configure our chart. Here are a few major configuration options that we can use to flavor our chart. 

  • We can change chart’s cosmetics like color, fonts etc. as per our needs.
  • We can format chart values or numbers.
  • We can specify chart captions and axis names.
  • We can add horizontal and vertical divisional zones of the chart … and many more.

Let’s discuss how.

 
We can use various charts parameters using the chartParams attribute of FCQS. Specify all our parameters of this attribute, all separated by ; (or user defined delimiter) and enclosed in a block (i.e. within [ & ] ).
 
Let’s take a simple example :
 
?v=FREE&chart=[chartType=column2D;chartWidth=300;chartHeight=240]&chartParams=&labels=Week 1;Week 2;Week 3;Week4&data=40800;31400;26700;55400
 
The following is the chart that is rendered using these properties.
《FusionCharts各项配置参数的文档(珍贵,找了好久才找倒)》
 
Let’s now discuss the major chart properties in details.
 
Functional Properties
 
These properties/parameters let us control a variety of functional elements on the chart. For example, we can opt to show/hide data labels, data values, y-axis values. We can also set chart limits and extended properties.
 
Name Range/Example Description
animation  Range: 0/1

Example : animation=1

This parameter lets us set the configuration whether the chart should appear in an animated fashion. If we do not want to animate any part of the chart, set this as 0.
showNames  Range: 0/1 It sets the configuration whether the x-axis labels will be displayed or not. 
rotateNames  Range: 0/1 This parameter lets us set whether the data labels would show up as rotated labels on the chart.
 
showValues  Range: 0/1 Sets the configuration whether data values would be displayed along with the data plot on chart. 
yAxisMinvalue  yAxisMinvalue=10 This parameter helps us explicitly set the lower limit of the chart. If we don’t specify this value, it is automatically calculated by FusionCharts based on the data provided by us. 
yAxisMaxValue yAxisMaxValue=200 This parameter helps us explicitly set the upper limit of the chart. If we don’t specify this value, it is automatically calculated by FusionCharts based on the data provided by us. 
showLimits Range: 0/1 Whether to show chart limit values?
For details and samples please refer to Query String Elements section.
 
Chart Titles and Axis Names
 
Using these properties, we can set the various headings and titles of chart like caption, sub-caption, x-axis and y-axis names etc.
 
Name  Range/Example Description 
caption  caption=Weekly Sales Caption of the chart. 
subCaption  subCaption=January Sub-caption of the chart. 
xAxisName  xAxisName=Week X-Axis Title of the Chart. 
yAxisName  yAxisName=Sales Y-Axis Title of the Chart. 
For details and samples please refer to Query String Elements>Title & Axis Names page.
 
Chart and Canvas Cosmetics
 
The following parameters let us configure chart cosmetics like background color, background alpha, canvas color & alpha etc.
 
Name  Range/Example Description 
bgColor  Range :HexColorCode

Example : bgColor=EFEFEF

This parameter sets the background color for the chart. We can set any hex color code as the value of this parameter. Remember to remove # and any spaces in between.
canvasBgColor  HexColorCode Sets Canvas background color. 
canvasBgAlpha Range: 0-100 This parameter helps us set the alpha (transparency) of the canvas.
canvasBorderColor  HexColorCode This parameter helps us set the border color of the canvas. 
canvasBorderThickness Range: 0-100 This parameter helps us set the border thickness (in pixels) of the canvas.
For details and samples please refer to Query String Elements Section.
 
Font Properties
 
Using the parameters below, we can define the generic font properties for all the text on the chart. These parameters allow us a high level control over font properties.
 
Name  Range/Example Description 
baseFont  baseFont=Arial This parameter lets us set the font face (family) of all the text (data labels, values etc.) on chart. If we also specify outCnvBaseFont parameter, this parameter controls only the font face of text within the chart canvas bounds. 
baseFontSize  baseFontSize=13 This parameter sets the base font size of the chart i.e. all the values and the names in the chart which lie on the canvas will be displayed using the font size provided here. 
baseFontColor  HexColorCode This parameter sets the base font color of the chart i.e. all the values and the names in the chart which lie on the canvas will be displayed using the font color provided here. 
outCnvBaseFont outCnvBaseFont=Tahoma This parameter sets the base font family of the chart font which lies outside the canvas i.e. all the values and the names in the chart which lie outside the canvas will be displayed using the font name provided here.
outCnvBaseFontSize outCnvBaseFontSize=15 This parameter sets the base font size of the chart i.e. all the values and the names in the chart which lie outside the canvas will be displayed using the font size provided here.
outCnvBaseFontColor HexColorCode This parameter sets the base font color of the chart i.e. all the values and the names in the chart which lie outside the canvas will be displayed using the font color provided here.
For details and samples please refer to Query String Elements>Changing Fonts page.
 
 
Divisional Lines & Grids
 
Using this set of parameters, we can control the properties of divisional lines, zero plane and alternate color bands. Divisional Lines are horizontal or vertical lines running through the canvas. Each divisional line signifies a smaller unit of the entire axis thus aiding the users in interpreting the chart. The zero plane is a 2D/3D plane that signifies the 0 position on the chart. If there are no negative numbers on the chart, we won’t see a visible zero plane. Alternate color bands are colored blocks between two successive divisional lines.
 
Name  Range/Example Description 
numDivLines  numDivLines=6 Number of horizontal axis division lines that we want on the chart. 
divLineColor  HexColorCode Color for divisional lines. 
divLineThickness Range: 1-5
Example : divLineThickness=3
Thickness of divisional lines.
divLineAlpha Range: 0-100 Alpha of divisional lines.
showAlternateHGridColor  Range: 0/1 Whether to show alternate colored horizontal grid bands? 
alternateHGridColor  HexColorCode Color of the alternate horizontal grid bands. 
alternateHGridAlpha Range: 0-100 Alpha (transparency) of the alternate horizontal grid bands.
showDivLineValues Range: 0/1 Whether to show div line values?
numVDivLines numVDivLines=5 Sets the number of vertical divisional lines to be drawn.
vDivLineColor HexColorCode Color of vertical axis division lines.
vDivLineThickness Range: 1-5 Thickness of vertical axis division lines.
In Pixel
vDivLineAlpha Range: 0-100 Alpha of vertical axis division lines.
showAlternateVGridColor  Range: 0/1 Whether to show alternate vertical colored grid bands? 
alternateVGridColor  HexColorCode Color of alternate vertical colored grid bands. 
alternateVGridAlpha Range: 0-100 Alpha (transparency) of the alternate vertical grid bands.
For details and samples please refer to Query String Elements>Divisional Lines page.
 
Number Formatting
 
FusionCharts v3 offers a lot of options to format numbers on the chart. Using the parameters below, we can control a myriad of options like: Formatting of commas and decimals Number prefixes and suffixes Decimal places to which the numbers would round to Scaling of numbers based on a user defined scale Custom number input formats.
 
Name  Range/Example Description 
numberPrefix  numberPrefix=$ Using this parameter, we could add prefix to all the numbers visible on the graph. For example, to represent all dollars figure on the chart, we could specify this parameter to ‘ $’ to show like $40000, $50000. For more details, please see Advanced Charting >Number Formatting page . . 
numberSuffix  numberSuffix=/a Using this parameter, we could add suffix to all the numbers visible on the graph. For example, to represent all figure quantified as per annum on the chart, we could specify this parameter to ‘ /a’ to show like 40000/a, 50000/a. For more details, please see Advanced Charting >Number Formatting page . 
formatNumberScale  Range: 0/1 Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding it – e.g., if formatNumberScale is set to 1, 1043 would become 1.04K (with decimals set to 2 places). Same with numbers in millions – a M will added at the end. For more details, please see Advanced Charting >Number Formatting page.
 
decimalPrecision  Range: 0-10 Number of decimal places to which all numbers on the chart would be rounded to.
 
divLineDecimalPrecision  Range: 0-10 Number of decimal places to which all divisional line (horizontal) values on the chart would be rounded to. 
limitsDecimalPrecision  Range: 0-10 Number of decimal places to which upper and lower limit values on the chart would be rounded to. 
For details and samples please refer to Query String Elements>Number Formatting   page.
 
Tool-tip/Hover Caption
 
The hover caption is the tool tip which shows up when the user moves his mouse over a particular data item (column, line, pie, bar etc.).
 
Name  Range/Example Description 
showhovercap Range: 0/1 Option whether to show/hide hover caption box.
0 sets the tool-tips off, while 1 sets the tool-tips on.
hoverCapBgColor HexColorCode Background color of the hover caption box.
hoverCapBorderColor HexColorCode Border color of the hover caption box.
hoverCapSepChar hoverCapSepChar=* The character specified as the value of this parameter separates the name and value displayed in the hover caption box. The default value is a comma (,).
For details and samples please refer to Query String Elements>Tool-tip page.
 


发表评论

电子邮件地址不会被公开。 必填项已用*标注

+ 36 = 43