- 浏览: 35371 次
- 性别:
- 来自: 济南
最新评论
-
zhouxueliang:
可以定义到xml文件中,通过访问xml文件的方式实现。也可以定 ...
FusionCharts背景 -
jeffrey9061:
想问一下,是在xml里面写这些语句,还是在展示页写呢、
FusionCharts背景 -
shanwei0409:
你好,如何在页面内动态的加载多个chart
一个页面多个chart
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.
非常感谢我在网上看到的几篇文章!
下边的连接是原文!
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.
非常感谢我在网上看到的几篇文章!
下边的连接是原文!
- FusionCharts学习.rar (39 KB)
- 下载次数: 60
发表评论
-
FusionCharts部分详细参数
2011-03-03 22:05 2542从本节起,我们详细介绍每种图表的详细参数和使用方法,我们从2D ... -
FusionCharts背景
2011-03-03 22:03 1888在后面的几节中,我将会采用实例的方法,以一个一个的小问题为主线 ... -
动画效果
2011-03-03 15:22 860我们还是使用前面例子的代码 代码 1 <chart ... -
模糊样式类型
2011-03-03 15:21 805模糊样式类型 是最简单的样式类型,可以帮助你对任何图表对象实现 ... -
斜面样式类型
2011-03-03 15:20 850如果你想为图表的任何 ... -
发光样式类型属性
2011-03-03 15:19 899The 发光样式类型 让你对任何图表对象应用发光的轮廓。它具有 ... -
发光样式类型
2011-03-03 15:19 693发光样式类型 The 发光样式类型 让你对任何图表对象应用 ... -
FusionChart动画样式类型
2011-03-03 15:17 1412FusionCharts做得最好的事情之一就是图表动画序列,这 ... -
FusionCharts样式
2011-03-03 15:17 1546正如你已经知道,使用字体样式类型,您可以控制所有图表上的文本的 ... -
FusionChart新特性
2011-03-03 15:15 1520FusionCharts v3 比以前的版本拥有大量的新的 功 ... -
透明chart
2011-03-03 15:12 1147上面的例子我们已经可 ... -
setDataXMl
2011-03-03 15:10 1037在前面的例子中,我们使用了dataURL方法提供数据给Fusi ... -
一个页面多个chart
2011-03-03 15:08 1398FusionCharts可以在一个页 ... -
转换成饼图
2011-03-03 15:08 964在上一个例子(我的第一个图表), 我们创造了一个柱形图来摘要显 ... -
FusionChart第一个图表
2011-03-03 15:07 1347在这里,我们将共同创建第一个图表。对于一个良好的开端,我们将创 ... -
FusionCharts嵌入页面的两种方式
2011-03-03 15:03 1195一:直接的HTML代码(如下所示)来嵌入图表: <htm ...
相关推荐
FusionChart_API +3.2破解版文件 +一个eclipse_FusionChartDemo +pdf使用教程 我把fusionchart常用的所有资源都打包放在这里了,需要的抱走吧。肯定有用的。
在这个“java fusionChart属性封装”的主题中,我们将深入探讨如何利用Java对FusionCharts的各种属性进行封装,以便更高效、更灵活地使用它们。 首先,让我们理解什么是属性封装。在面向对象编程中,封装是将数据和...
### FusionCharts 属性详解 #### 引言 在利用FusionCharts进行实时图表展示时,尤其是在需要频繁更新数据的情况下(如每15分钟获取一次数据),可能会遇到图表中某些特定数据点显示的需求问题。本文旨在深入探讨...
fusionchart的java简单封装fusionchart的java简单封装fusionchart的java简单封装fusionchart的java简单封装fusionchart的java简单封装fusionchart的java简单封装
FusionChart FusionChart.js
fusionchart开发常用的属性总结,包括仪表盘的属性,柱状图属性,折线图属性
在HTML中,可以通过`<a>`标签实现,设置`href`属性为图片的URL,并添加`download`属性指定文件名。 4. **安全性与性能考虑**: 在实际应用中,要考虑图片的安全性,比如防止未授权访问。同时,为了提高性能,可以...
2. **创建图表对象**:使用JavaScript创建一个图表对象,定义图表的类型、宽度、高度、标题、数据源等属性。 3. **设置数据源**:数据源可以是JSON格式的字符串或者从服务器获取的数据。FusionCharts支持动态数据...
通过调整XML数据和使用FusionChart的API,可以定制图表的颜色、字体、图例、工具提示等视觉效果,以及添加交互性功能,如点击事件和动态更新。 总之,FusionChart甘特图控件为项目管理和监控提供了一种直观、互动的...
FusionChart和FusionWidgets破解版,目前世界上最好的图表展示软件。
2. 初始化图表:创建图表对象并设置基本属性,如图表类型、宽度、高度、标题等。 3. 准备数据:将数据以FusionCharts支持的格式(如JSON)组织好。 4. 渲染图表:调用图表对象的render()方法,将数据渲染到指定的...
标题"FusionChart"指的是一个流行的JavaScript图表库,用于在网页上创建交互式、美观的数据可视化效果。这个库广泛应用于各种数据分析、报告和仪表板场景,让数据以图形化的方式直观呈现,便于理解和解读。 ...
首先,"fusionchart支持仪表盘"意味着FusionCharts具备生成仪表盘的能力。仪表盘是一种信息展示工具,它将多个关键性能指标(KPIs)集中在一个统一的视图中,便于用户快速理解业务状况。FusionCharts通过其丰富的...
2. **创建第一个图表**:从基础开始,学习如何生成一个简单的图表,包括定义图表类型、设置数据源和基本属性。 3. **自定义图表**:掌握如何调整图表的颜色、样式、标签等,以满足个性化需求。 4. **交互与事件处理*...
在"fusionChart中文文档"中,你将找到关于FusionCharts的各种教程、指南和API参考。这些文档通常会涵盖以下关键知识点: 1. **安装与设置**:介绍如何在你的项目中引入FusionCharts库,包括下载、引入JavaScript...
完整的fusionchart开发资源、文档,公司项目使用的。
提供了一个3D柱状图Column3D的破解,已测试通过