Chart 对象
Object Name Description描述 支持特效 Animation Parameters Supported
ANCHORS 对于线形图,区域图,转折点对象 • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
• _xScale
• _yScale
BACKGROUND 报表背景对象. • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
• _xScale
• _yScale
CANVAS 报表实现的区域对象 • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
• _xScale
• _yScale
CAPTION 主标题. • Animation
• Font
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
DATALABELS X轴数据标签 • Animation
• Font
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
DATAPLOT 报表的实现对象:线性指的是线、饼形图指的是饼. • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
• _xScale
• _yScale
DATAVALUES 实现对象的数据值. • Animation
• Font
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
DIVLINES 水平方向上,把整个图标分割成几块的线对象 • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _y
• _xScale
HGRID 水平方向上,把整个图标分割成几块的块对象 • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _y
• _xScale
• _yScale
LEGEND 图例对象 • Animation
• Font
• Shadow
• Glow
• Bevel
• Blur • _alpha
SUBCAPTION SUBCAPTION refers to the sub-heading of the chart. • Animation
• Font
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
TOOLTIP 鼠标移动到数据点上,用作提示的对象 • Font
TRENDLINES 趋势线对象,或者是说目标线、 • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _y
• _xScale
• _yScale
TRENDVALUES 趋势线显示值对象. • Animation
• Font
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
VDIVLINES 垂直方向上,把整个图标分割成几块的线对象 • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _yScale
VGRID 垂直方向上,分成的块对象 • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _xScale
• _yScale
VLINES 垂直方向上,分割图标的对象。(不是平均分割,二十随意加)例如:
<set label='Nov' value='910000' />
<set label='Dec' value='680000' />
<vLine/>
<set label='Jan' value='720000' />
<set label='Feb' value='810000' /> • Animation
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
• _yScale
XAXISNAME X轴的名称. • Animation
• Font
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
YAXISNAME Y轴名称. • Animation
• Font
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
YAXISVALUES YAXISVALUES refers to the limit values or divisional line values, which are displayed along the y-axis of the chart. • Animation
• Font
• Shadow
• Glow
• Bevel
• Blur • _alpha
• _x
• _y
<chart> element Attributes
Functional Attributes
These attributes let you control a variety of functional elements on the chart. For example, you can opt to show/hide data labels, data values, y-axis values. You can also set chart limits and extended properties.一下属性是设置在chart标签中的
Attribute Name Type Range Description
animation Boolean 0/1 是否是用动画.
palette Number 1-5 调色板,没个图又五个掉色模板,. Valid values are 1-5.
connectNullData Boolean 0/1 处理空的值对象是否间隔开.
showLabels Boolean 0/1 是否显示x轴标签
labelDisplay String WRAP:
外围显示
STAGGER,:
上下隔开显示ROTATE:
竖直显示
NONE:
没样式 X轴lable显示的样式.
rotateLabels Boolean 0/1 是否旋转x轴lable(水平显示,竖直显示)
slantLabels Boolean 0/1 在旋转x轴lable的情况下,是否旋转一定得角度显示
labelStep Number 1 or above X轴lable的显示间隔,默认为1
staggerLines Number 2 or above If you've opted for STAGGER mode as labelDisplay, using this attribute you can control how many lines to stagger the label to. By default, all labels are displayed in a single line.
showValues Boolean 0/1 是否在数据点上显示相应的值
rotateValues Boolean 0/1 如果showValue=1是否竖直显示此值
showYAxisValues Boolean 0/1 是否显示y轴上的标签值
showLimits Boolean 0/1 是否显示y轴上的最大值和最小值,即使showYAxisValues=0的情况下,也会强行去处理
showDivLineValues Boolean 0/1 在y轴上是否显示每一个分割线的对应值
yAxisValuesStep Number 1 or above Y轴上点的显示间隔.
showShadow Boolean 0/1 是否显示阴影效果
adjustDiv Boolean 0/1 自动调试y方向上的分割
rotateYAxisName Boolean 0/1 是否旋转y轴的name
yAxisNameWidth Number (In Pixels) 如果不旋转y轴name那么可以设定name的显示最大宽度
clickURL String 整个chart作为一个热点,当点击时跳转的页面路径
defaultAnimation Boolean 0/1 不知道跟Animation有什么区别
yAxisMinValue Number 设定y轴的最小值
yAxisMaxValue Number 设定y轴的最大值
setAdaptiveYMin Boolean 0/1 This attribute lets you set whether the y-axis lower limit would be 0 (in case of all positive values on chart) or should the y-axis lower limit adapt itself to a different figure based on values provided to the chart.
Chart Titles and Axis Names
Using these attributes, you can set the various headings and titles of chart like caption, sub-caption, x-axis and y-axis names etc. 设置各种标题
Attribute Name Type Description
caption String 主标题
subCaption String 副标题
xAxisName String X轴名字
yAxisName String Y-轴名字
Chart Cosmetics
The following attributes let you configure chart cosmetics like background color, background alpha, canvas color & alpha etc.设置背景,边框等属性
Attribute Name Type Range Description
showBorder Boolean 0/1 是否显示整个图标的边框(chart)
borderColor Color 边框颜色
borderThickness Number In Pixels 边框宽度
borderAlpha Number 0-100 边框透明度
bgColor Color Chart背景色
bgAlpha Number 0-100 背景色透明度.
bgRatio Number 0-100 如果设置的是渐变颜色,这个是设置渐变颜色的梯度
bgAngle Number 0-360 颜色渐变的角度
bgSWF String 设置一个图片背景
bgSWFAlpha Number 0-100 图片背景的透明度
canvasBgColor Color 图标作用区,我们以后叫画布,的背景颜色.
canvasBgAlpha Number 画布背景的透明度
canvasBgRatio Number 0-100 画布背景色渐变梯度
canvasBgAngle Number 画布背景渐变角度
canvasBorderColor Color 画布边框颜色
canvasBorderThickness Number 0-5 画布边框宽度.
canvasBorderAlpha Number 0-100 画布边框透明度
Data Plot Cosmetics
These attributes let you configure how your plot (colums, lines, area, pie or any data that you're plotting) would appear on the chart.
If the plots can show borders, you can control the border properties using the attributes listed below. Or, if they support gradient fills, you can again configure various properties of the gradient using these attributes.
Various other controls over plot cosmetics can be attained using this set of attributes.
下列属性主要是设置实现体(曲线,柱,饼等)的属性,主要是放到数据上的(dataset标签中)
Attribute Name Type Range Description
lineColor Color Hex Code 线颜色
lineThickness Number In Pixels 线宽.
lineAlpha Number 0-100 先透明度
lineDashed Boolean 0/1 是否虚线
lineDashLen Number In Pixels 虚线的每段长度.
lineDashGap Number In Pixels 虚线长度差距.
Anchors
On line/area charts, anchors (or marker points) are polygons which appear at the joint of two consecutive lines/area points. These are indicators to show the position of data points.
The anchors handle tool tips and links for the data points. So, if you opt to not render anchors on a chart, the tool tips and links won't function. You can, however, hide them by setting alpha to 0 and still enable tool tips and links.
You can customize all the facets of anchors using the properties below.主要设置转折点的属性
Attribute Name Type Range Description
drawAnchors Boolean 0/1 是否显示转折点
anchorSides Number 3-20 转折点图形的边数.
anchorRadius Number In Pixels 转折点图行半径
anchorBorderColor Color Hex Code 转折点图形边的颜色.
anchorBorderThickness Number In Pixels 转折点图形边的宽度.
anchorBgColor Color Hex Code 转折点图形颜色.
anchorAlpha Number 0-100 透明.
anchorBgAlpha Number 0-100 背景透明
Divisional Lines & Grids
Using this set of attributes, you 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 signifes 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, you won't see a visible zero plane.
Alternate color bands are colored blocks between two successive divisional lines.
设置间隔线和网格属性的,只对线性图标有效果
Attribute Name Type Range Description
numVDivLines Number Y轴分割线条数
vDivLineColor Color Y轴分割线颜色.
vDivLineThickness Number In Pixels Y轴宽度.
vDivLineAlpha Number 0-100 Y轴透明
vDivLineIsDashed Boolean 0/1 Y轴是否虚线?
vDivLineDashLen Number In Pixels Y轴虚线的长度.
vDivLineDashGap Number In Pixels Y轴间隔长度.
showAlternateVGridColor Boolean 0/1 是否让每一栏显示不同颜色?
alternateVGridColor Color 设定奇数栏的颜色.
alternateVGridAlpha Number 设定奇数栏的透明度
numDivLines Number Numeric value > 0 水平方向上的分割线的个数
divLineColor Color 颜色
divLineThickness Number 1-5 线宽
divLineAlpha Number 0-100 透明.
divLineIsDashed Boolean 0/1 虚线
divLineDashLen Number In Pixels 线长.
divLineDashGap Number In Pixels 间隔长.
zeroPlaneColor Color .零点线颜色
zeroPlaneThickness Number In Pixels 零点的线的宽度
zeroPlaneAlpha Number 0-100 透明
showAlternateHGridColor Boolean 0/1 是否间隔颜色?
alternateHGridColor Color 间隔颜色.
alternateHGridAlpha Number 间隔透明
showZeroPlane Boolean 0/1
Legend Properties
In multi-series / combination charts, the series name of each data-set shows up in the legend of the chart. If you do not need the legend, you can opt to hide the same.
Also, the legend can be placed at the bottom of the chart or to the right of the chart.
Using the attributes below, you can configure the functional and cosmetic properties of the legend.
设置关于图例的属性
Attribute Name Type Range Description
showLegend Boolean 0/1 是否显示图例?
legendPosition String BOTTOM or RIGHT 图例位置.
legendCaption String 设置图例标题.
legendMarkerCircle Boolean 0/1 Whether to use square legend keys or circular ones?
legendBgColor Color Hex Code 图例背景颜色
legendBgAlpha Number 0-100 Background alpha for the legend.
legendBorderColor Color Hex Code Border Color for the legend.
legendBorderThickness Number In Pixels Border thickness for the legend.
legendBorderAlpha Number 0-100 Border alpha for the legend.
legendShadow Boolean 0/1 图例阴影?
legendAllowDrag Boolean 0/1 是否允许拖动图例.
legendScrollBgColor Color Hex Code 滚动条背景的颜色
legendScrollBarColor Color Hex Code 滚动条的颜色.
legendScrollBtnColor Color Hex Code If you've too many items on the legend, a scroll bar shows up on the same. This attribute lets you configure the color of buttons of the scroll bar.
Number Formatting
FusionCharts v3 offers you a lot of options to format your numbers on the chart.
Using the attributes below, you 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
设置数字属性
Attribute Name Type Range Description
formatNumber Boolean 0/1 This configuration determines whether the numbers displayed on the chart will be formatted using commas, e.g., 40,000 if formatNumber='1' and 40000 if formatNumber='0 '
formatNumberScale Boolean 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 Number Formatting section.
defaultNumberScale String The default unit of the numbers that you're providing to the chart. For more details, please see Advanced Number Formatting section.
numberScaleUnit String Unit of each block of the scale. For more details, please see Advanced Number Formatting section.
numberScaleValue String Range of the various blocks that constitute the scale. For more details, please see Advanced Number Formatting section.
numberPrefix String Character 数字前缀
numberSuffix String Character 数字后缀.
decimalSeparator String Character This option helps you specify the character to be used as the decimal separator in a number. For more details, please see Advanced Number Formatting section.
thousandSeparator String Character This option helps you specify the character to be used as the thousands separator in a number. For more details, please see Advanced Number Formatting section.
inDecimalSeparator String Character In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give a error while converting to number. So, FusionCharts accepts the input decimal and thousand separator from user, so that it can covert it accordingly into the required format. This attribute lets you input the decimal separator. For more details, please see Advanced Number Formatting section.
inThousandSeparator String Character In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give a error while converting to number. So, FusionCharts accepts the input decimal and thousand separator from user, so that it can covert it accordingly into the required format. This attribute lets you input the thousand separator. For more details, please see Advanced Number Formatting section.
decimals Number 0-10 小数位数.
forceDecimals Boolean 0-1 Whether to add 0 padding at the end of decimal numbers? For example, if you set decimals as 2 and a number is 23.4. If forceDecimals is set to 1, FusionCharts will convert the number to 23.40 (note the extra 0 at the end)
yAxisValueDecimals Number 0-10 Y轴上的显示的小数位数
Font Properties
Using the attributes below, you can define the generic font properties for all the text on the chart. These attributes allow you a high level control over font properties.
If you intend to specify font properties for individual chart elements (like Caption, sub-caption etc.), you'll need to use the STYLES feature of FusionCharts v3. Using STYLES, you can also specify advanced font properties like Bold, Italics, HTML Mode etc.
设置文本属性
Attribute Name Type Range Description
baseFont String Font Name 设定整个chart的文字字体
baseFontSize Number 0-72 设定整个chart的文字大小.
baseFontColor Color 设定整个chart的文字颜色.
outCnvBaseFont String Font Name 设定绘图区以外的文字字体.
outCnvBaseFontSize Number 0-72 设置绘图区外的文字大小.
outCnvBaseFontColor Color 设置绘图区外的文字颜色.
Tool-tip
These attributes let you control the tool tip. You can set the background color, border color, separator character and few other details.
设定提示信息的属性
Attribute Name Type Range Description
showToolTip Boolean 0/1 是否显示提示信息?
toolTipBgColor Color 提示区背景颜色.
toolTipBorderColor Color 提示区边框颜色.
toolTipSepChar String .
seriesNameInToolTip Boolean 0/1 For multi-series and combination charts, FusionCharts shows the following information in tool tip (unless tool text is explicitly defined): "Series Name, Category Name, Data Value". This attribute lets you control whether series name would show up in tool tip or not?
Chart Padding & Margins
The following attributes help you control chart margins and paddings.
FusionCharts v3 allows you manually customize the padding of various elements on the chart to allow advanced manipulation and control over chart visualization. Padding in FusionCharts is always defined in pixels, unless the attribute itself suggests some other scale (like plotSpacePercent).
You can also define the chart margins. Chart Margins refer to the empty space left on the top, bottom, left and right of the chart. That means, FusionCharts wouldn't plot anything in that space.
It's not necessary for you to specify any padding/margin values. FusionCharts automatically assumes the best values for the same, if you do not specify the same.
设定距离的,这个不说了,看文档就可以了
Attribute Name Type Range Description
captionPadding Number In Pixels This attribute lets you control the space (in pixels) between the sub-caption and top of the chart canvas. If the sub-caption is not defined, it controls the space between caption and top of chart canvas. If neither caption, nor sub-caption is defined, this padding does not come into play.
xAxisNamePadding Number In Pixels Using this, you can set the distance between the top end of x-axis title and the bottom end of data labels (or canvas, if data labels are not to be shown).
yAxisNamePadding Number In Pixels Using this, you can set the distance between the right end of y-axis title and the start of y-axis values (or canvas, if the y-axis values are not to be shown).
yAxisValuesPadding Number In Pixels This attribute helps you set the horizontal space between the canvas left edge and the y-axis values or trend line values (on left/right side). This is particularly useful, when you want more space between your canvas and y-axis values.
labelPadding Number In Pixels This attribute sets the vertical space between the labels and canvas bottom edge. If you want more space between the canvas and the x-axis labels, you can use this attribute to control it.
valuePadding Number In Pixels It sets the vertical space between the end of columns and start of value textboxes. This basically helps you control the space you want between your columns/anchors and the value textboxes.
chartLeftMargin Number In Pixels Amount of empty space that you want to put on the left side of your chart. Nothing is rendered in this space.
chartRightMargin Number In Pixels Amount of empty space that you want to put on the right side of your chart. Nothing is rendered in this space.
chartTopMargin Number In Pixels Amount of empty space that you want to put on the top of your chart. Nothing is rendered in this space.
chartBottomMargin Number In Pixels Amount of empty space that you want to put on the bottom of your chart. Nothing is rendered in this space.
canvasPadding Number In Pixels Lets you set the space between the canvas border and first & last data points
legendPadding Number In Pixels Padding of legend from right/bottom side of canvas
<categories> element
The <categories> element lets you bunch together x-axis labels of the chart. For a multi-series/combination chart, it's necessary to provide data labels using <category> elements under <categories> element.
The following properties of <categories> element help you control the font properties of data labels.
Additionally, in case of scatter (XY Plot)/Bubble chart, the attributes of <categories> element can be used to define the cosmetics of vertical chart lines.
设定在<categories>标签中的选项
Attribute Name Type Range Description
font String Valid font face Lets you specify font face for the x-axis data labels.
fontSize Number Lets you specify font size for the x-axis data labels.
fontColor Color Hex Code Lets you specify font color for the x-axis data labels.
<category> element
Each <category> element represents an x-axis data label.
In multi-series/combination charts, it's necessary to provide an equal number of <category> elements and data items (<set> elements within each<dataset>). FusionCharts plots only those data items for which it could find a respective <category> element.
You can specify the following attributes for <category> element:
设定<category>中的选项
Attribute Name Type Range Description
label String This attribute determines the label for the data item. The label appears on the x-axis of chart.
showLabel Boolean 0/1 是否显示x轴上的标签.
toolText String 设定提示的具体信息
Attribute Name Type Range Description
color Color Hex Color 垂直分割线颜色.
thickness Number In Pixels Thickness in pixels of the vertical separator line.
alpha Number 0-100 Alpha of the vertical separator line.
dashed Boolean 0/1 Whether the vertical separator line should appear as dashed?
dashLen Number In Pixels If the vertical separator line is to appear as dashed, this attribute defines the length of dash.
dashGap Number In Pixels If the vertical separator line is to appear as dashed, this attribute defines the length of dash gap.
非常感谢我在网上看到的几篇文章!
下边的连接是原文!