`
zhouxueliang
  • 浏览: 35093 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

FusionCharts部分详细参数

阅读更多
从本节起,我们详细介绍每种图表的详细参数和使用方法,我们从2D柱状图说起。
一个柱状图对象的内容包含很多方面,下面给出一个列表。
图表
数据
其他
图表对象
功能属性
标题和轴名称
图表修饰
分区线/网格
工具提示
填充和边距
<set> 元素
绘图修饰
数字格式
文字属性
垂直线
趋势线

我们先从图表对象说起。什么是图表对象?我们还是得先看数据文件,如下

1 <chart palette='2' caption='月度销售额' xAxisName='月度' yAxisName='单位(台)' showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='0' baseFont='宋体' baseFontSize='12'>
2 <set label='一月' value='462' />
3 <set label='二月' value='857' />
4 <set label='三月' value='671' alpha='20' />
5 <set label='四月' value='494' />
6 <set label='五月' value='761' />
7 <set label='六月' value='960' />
8
9 </chart>
10


这里 caption xAxisName 等都是图表对象,来表示我们chart的一个属性,即“标题”“X轴名称”等,在fusioncharts中,系统定义了很多的图标对象,每种展示类型(柱状图、饼图等)的图表对象有些是通用的有些是非通用。这些对象不需要我们都记忆,但是在需要的时候能知道去什么地方查找就可以,以我看来,fusioncharts已经做得非常完备,基本上你能想到的地方它都可以实现。

对象名
描述
功能支持
动画参数支持
BACKGROUND
BACKGROUND 是指图表的整个背景
· Animation
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
· _xScale
· _yScale
CANVAS
在2D图表中, CANVAS是指实际图表绘制区域.它是一个有界矩形。在3D图表中,它指的是在三维基础上建立的列。
· Animation
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
· _xScale
· _yScale
CAPTION
CAPTION 指图表的标题.
· Animation
· Font
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
DATALABELS
DATALABELS 指的是X轴的数据标签.
· Animation
· Font
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
DATAPLOT
DATAPLOT 指的是图表的实际描绘。例如,在2D柱状图中,列被称为DataPlot. 在饼图中是饼,在气泡图中是气泡等。
· Animation
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
· _xScale
· _yScale
DATAVALUES
DATAVALUES 指的是描绘的值如每个数据(折线、列、条、饼等),这是数据图旁边显示的值。
· Animation
· Font
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
DIVLINES
DIVLINES 是画布上的水平或垂直线。每一个分区线把轴分为较小的单位帮助用户理解图表。
· Animation
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _y
· _yScale
HGRID
HGRID 是指两个连续的横向分区线替代颜色带。
· Animation
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _y
· _xScale
· _yScale
SUBCAPTION
SUBCAPTION指的是图表子标题。
· Animation
· Font
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
TOOLTIP
TOOLTIP指的是当鼠标悬停在数据图上的提示信息。
· Font

TRENDLINES
TRENDLINES 指的是跨越图表画布的水平、垂直线。它可以对一些预先确定的价值提供帮助。
· Animation
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _y
· _xScale
· _yScale
TRENDVALUES
TRENDVALUES 指趋势线(如果显示任何值)。
· Animation
· Font
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
VLINES
VLINES 是垂直分割线帮助你分割数据块。这些线贯穿图表的上下,从而分成不同的数据块。在条形图中,他们是图表水平贯穿水平线。
· Animation
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
· _yScale
VLINELABELS
VLINELABELS 指任何已创建的垂直线分隔标签。
· Animation
· Font
· Shadow
· Glow
· Bevel
· Blur
· _alpha
XAXISNAME
XAXISNAME 指的是X轴图表的标题。
· Animation
· Font
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
YAXISNAME
YAXISNAME指的是Y轴图表的标题。
· Animation
· Font
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
YAXISVALUES
YAXISVALUES 指的是有限值或分割线值,这是沿Y轴图表显示。
· Animation
· Font
· Shadow
· Glow
· Bevel
· Blur
· _alpha
· _x
· _y
· _rotation

查看了上述的对象概念后,我们来看看激动人心的功能属性,这些是我们在后续工作中会经常打交道的内容,大家应该对这部分重点了解。
    <chart> 元素属性
 
转自:http://www.cnblogs.com/tippoint/archive/2010/08/25/1807796.html
功能属性
这些属性可以控制图表上的各种功能元素。例如,你可以选择显示/隐藏数据标签,数据值,y轴值。你还可以设置图表的限制和扩展属性。


属性名
类型
范围
描述
animation
布尔
0/1
此属性可让您选择来控制你的图表动画。如果你不希望任何图表的动画部分,设置为0。
palette
数值
1-5
FusionCharts v3 介绍了调色板的概念。每个图表有5预先定义的调色板,你可以选择。每个调色板中的图表呈现不同的颜色主题。有效值为1-5。
paletteColors
字符串
由逗号分隔的16进制颜色代码
虽然调色板属性允许选择一个调色板主题适用于图表的背景,画布,字体和工具提示,它不改变数据项(即,列,行,饼图等)的颜色。使用paletteColors属性,您可以指定您为十六进制的颜色自定义数据项列表。颜色的名单必须由逗号如<分开。图表将循环通过指定的颜色列表,然后提供相应的数据图。
要为整个Web应用程序所有的图表设置相同的颜色,你可以保存在应用程序中使用的调色板的颜色列表,然后在全球每个图表中提供相同的XML。
showAboutMenuItem
布尔
0/1
设置为1显示图表中的自定义上下文菜单,可定制以显示您的文字,可以链接到您的网址。例如,您可以设置图表的上下文菜单,包括“关于您的公司名称”,然后链接到你的公司主页。默认情况下,点击该图表显示“关于FusionCharts”。
aboutMenuItemLabel
字符串

为上下文菜单项设置的自定义标签。
aboutMenuItemLink
字符串
URL
自定义上下文菜单项的链接。使用FusionCharts的链接格式链接才能打开新的窗口一样,弹出窗口,框架或JavaScript链接。
showLabels
布尔
0/1
它设置是否在X轴标签将被显示或不配置。
labelDisplay
字符串
WRAP, STAGGER, ROTATE or NONE
使用此属性,您可以控制将出现在图表上您的数据标签(X轴标签)。有4个选项: WRAP, STAGGER, ROTATE or NONE. WRAP 如果它的长度超过所分配的面积包装标签的文字. ROTATE 旋转在垂直或倾斜位置标签. STAGGER 分成多行的标签.
rotateLabels
布尔
0/1
此属性允许您设置数据标签是否会显示为旋转图表上的标签.
slantLabels
布尔
0/1
如果您选择了显示旋转的图表标签,这个属性允许您设置的配置标签是否会显示为倾斜标签或完全垂直的。
labelStep
数值
1或以上
默认情况下,所有标签都显示在图表上.如果你有一系列数据(如月份、日期、星期名称),你可以为了清晰隐藏每个n-th标签。这个标签只是允许你这么做。它可以跳过n个x轴标签。
staggerLines
数值
2 或以上
如果您选择STAGGER作为标签显示模式,使用这个属性可以控制错开多少线。默认情况下,所有标签都显示在一行。
showValues
布尔
0/1
设置数据值是否会沿着图表数据描绘显示。
rotateValues
布尔
0/1
如果您选择了显示数据值,你可以旋转它们使用此属性。
placeValuesInside
布尔
0/1
如果您选择了显示数据值,可以在列中使用这属性显示。默认情况下,显示的值在数据列的外部。
showYAxisValues
布尔
0/1
FusionCharts 的Y轴被分割线分为不同的部分。每个分割线显示此部分的值。使用此属性你可以是否显示这些分割线的值。
showLimits
布尔
0/1
是否显示图表的限值。 showYAxisValues是v3单独的新属性。
showDivLineValues
布尔
0/1
是否显示分区线的值。 showYAxisValues是v3单独的新属性。
yAxisValuesStep
数值
1或以上
默认情况下,所有分区线显示它们的值。但是,您可以选择跳过每x(次)分区线使用这个属性值
showShadow
布尔
0/1
是否显示列的阴影。
adjustDiv
布尔
0/1
FusionCharts自动根据所提供的数据尝试调整分区线和限值。不过,如果你想设置分割线的明确的下限值和上限值,首先设置此属性为false。这将禁用分区线自动调整。
rotateYAxisName
布尔
0/1
如果你不想旋转Y轴的名称,设置为0。特别在你为Y轴名称指定字符集如UTF8时,在旋转模式不要旋转Y轴名称。
yAxisNameWidth
数字
(像素值)
如果您选择不旋转的y轴的名称,你可以选择一个最大宽度将适用于y轴的名称。
clickURL
字符串

整个图表现在可以作为一个热点。使用本URL定义为图表热点链接。该链接为FusionCharts的链接格式。
defaultAnimation
布尔
0/1
默认情况下,图表的一些元素使用动画.如果你想替换默认的动画模式,你可以设置此属性为0。它在你通过使用样式功能定义自己的动画模式时特别有用。
yAxisMinValue
数字

此属性可以帮助您显式设置图表的下限。如果你不指定这个值,它是由FusionCharts自动计算你所提供的数据为基础的。
yAxisMaxValue
数字

此属性可以帮助您显式设置图表的上限。如果你不指定这个值,它是由FusionCharts自动计算你所提供的数据为基础的。
setAdaptiveYMin
布尔
0/1
此属性可让您设定是否y轴的下限会是0(在图表上有明确值的情况下),还是应该提供数值为基础在y轴下限适应不同的数字。

这部分内容是chart对象的属性,也就是说可以在<chart 之后应用的内容,下面我们举几个例子进行说明。
1. 调用不同的调色板颜色
如:palette='4'
      

2显示自定义的右键菜单和链接
       showAboutMenuItem='1' aboutMenuItemLabel='James Wang’s 教程'
aboutMenuItemLink=’lesson1.html’



这里需要有点注意:
1. 由于flash内部安全机制的原因,这里的链接只能是本域内的文件
2. 链接的文件如果是n-lesson1.html则在新窗口打开,注意这时的物理文件还是lesson1.html
如果想在帧内链接 用F-做前缀
3. 支持整个图表作为一个热点链接,语法为
clickurl=’n-http://www.cnblogs.com/tippoint’
注意这样的代码只能运行在服务器模式下,如http://localhost/lesson1.html下的点击才能有效,在文件模式下的访问,如
http://www.cnblogs.com/教程/source/lesson1.html 是不起作用的。
分享到:
评论

相关推荐

    FusionCharts图详细参数

    以下将详细介绍FusionCharts的一些关键参数和特性。 **一、FusionCharts的基本构成** 1. **SWF动画文件**:FusionCharts的核心是基于Flash的SWF文件,它包含了绘制图表的所有逻辑和视觉元素。SWF文件与数据分离,...

    FusionCharts参数详细说明

    标题中的"参数详细说明"指的是FusionCharts的各种配置选项,这些参数允许用户自定义图表的外观、行为和交互性。下面我们将详细介绍一些重要的FusionCharts参数: 1. **chart.id**:这是图表的唯一标识符,用于在...

    关于FusionCharts的参数的详细说明

    下面将详细介绍FusionCharts中的关键参数及其作用。 1. `chart`: 这是FusionCharts的核心参数,用于定义图表的基本属性,如类型、宽度、高度、背景颜色等。例如,`type`参数指定图表类型(如饼图、线图),`width`...

    Fusioncharts XML参数说明

    本篇文章将基于提供的部分XML配置参数进行详细解析,帮助读者更好地理解如何通过XML来定制不同的图表类型,如单柱图、折线图、饼图、堆栈图等。 #### 二、通用参数 ##### 1. **caption** - **定义**: 图表标题。 ...

    FusionCharts破解版参数大全+中文教程

    ### FusionCharts参数详解:打造精美3D饼图的秘籍 #### 一、动画与样式设置 - **animation**:此参数控制图表加载时是否显示动画。设为true时,图表加载过程将伴随平滑过渡动画,提升用户体验;设为false则无动画...

    FusionCharts参数的详细说明和功能特性

    以下是对FusionCharts参数的详细说明和功能特性: 1. **动画效果**: - `animation` 参数决定了图表数据是否以动画形式呈现。默认情况下,该值为1,表示启用动画效果。 2. **坐标轴标签**: - `showNames` 控制...

    FusionCharts配置参数的文档

    在创建图表时,你需要设置`chart`对象,这个对象包含了大部分的全局配置参数,例如标题、副标题、图例、数据标签等。例如,`caption`用于设置图表的主标题,`subCaption`则用来设置副标题。 接下来,我们关注数据...

    fusioncharts

    饼图是 FusionCharts 中常用的一种图表类型,用于展示各部分占整体的比例关系。通过设置不同的 `data` 和 `labels`,可以创建多段的饼图。饼图的特定参数,如 `showLabels`、`showPercentageInLabel` 和 `...

    FusionCharts完整资料集

    "FusionCharts参数大全+中文说明.pdf"是FusionCharts所有图表属性和方法的全面参考,包含详细的中文解释,是开发者深入理解和自定义图表的重要参考资料。 ### 6. functionCharts导出实例教程 "functionCharts导出...

    FusionCharts参数详解

    下面,我们将根据给定的文件内容,详细解析FusionCharts中的关键参数及其功能特性,帮助读者更全面地理解如何利用这些参数优化图表的展示效果。 #### 动画与显示控制 - **animation**: 控制图表加载时是否使用动画...

    FusionCharts 参数大全 中文说明

    为了便于开发者使用和参考,本文档将提供FusionCharts的参数详细中文说明。 ### 基本属性参数 - **animation**: 控制加载图表时是否显示动画效果。 - **palette**: 内置的图表样式,共5种可供选择,为图表提供不同...

    FusionCharts参数大全+中文说明

    以下是对FusionCharts参数的详细解读,涵盖从图表动画、样式到高级定制的各项设置。 #### 一、图表基础配置 - **animation**:控制图表加载时的动画效果是否开启。 - **palette**:选择内置的图表样式,共有五种...

    FusionCharts 插件及源码实例

    以下是对FusionCharts及其应用实例的详细介绍: 1. **图表类型**:FusionCharts支持多种图表类型,包括柱状图、饼图、线图、面积图、散点图、雷达图等。每种图表都有其特定的应用场景,如柱状图适合展示不同类别的...

    FusionCharts画示例图

    本示例集旨在详细介绍如何使用FusionCharts API来绘制各种图表,并提供相关的说明文档,以帮助开发者更好地理解和应用。 一、FusionCharts API详解 FusionCharts API是用于操作和控制图表的关键工具,它允许开发者...

    FusionCharts_demo.zip

    现在,我们详细讨论这个演示文件的组成部分: 1. **jquery.js**:这是jQuery库的核心文件,包含了一系列函数和方法,用于提高开发效率。在FusionCharts的示例中,jQuery可能用于处理页面元素的加载、事件绑定、数据...

    FusionCharts Free中文开发指南.rar

    "FusionCharts Free中文开发指南.pdf"包含详细的教学步骤和实例代码,指导开发者从零开始创建图表。通过阅读这份指南,你可以学习如何设置数据源、创建图表对象、添加自定义功能等。 **9. 性能优化** 为了提高图表...

Global site tag (gtag.js) - Google Analytics