FusionChart完全入门手册6
2010-09-03 14:19
274 查看
如何使用样式
<!-- 这里是你的数据 -->
<styles>
<definition>
<style name='MyFirstFontStyle' type='font' face='Verdana' size='12' color='FF0000' bold='1' bgColor='FFFFDD' />
<style name='MyFirstAnimationStyle' type='animation' param='_xScale' start='0' duration='2' />
<style name='MyFirstShadow' type='Shadow' color='CCCCCC' />
</definition>
<application>
<apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />
<apply toObject='Canvas' styles='MyFirstAnimationStyle' />
<apply toObject='DataPlot' styles='MyFirstShadow' />
</application>
</styles>
</chart>
<styles> 元素的子元素是<definition> 和 <application> 元素. 顾名思义, <definition> 元素包含您的图表定义自定义样式 而根据<application> 元素,你自定义的样式套用您对不同的图表对象。
现在,让我们首先要定义样式。
MyFirstFontStyle, 这将有助于我们设置图表上的字体属性.
MyFirstAnimationStyle, 将帮助我们设置图表对象动画
MyFirstShadow 可以使任何一个图表对象的阴影效果.
每个样式定义要使用<style> 元素. 多个样式元素可以放在另一个<definition> 元素中. 因此如果你想定义5个自定义样式,你需要创建5个<style>元素.
根据不同的风格类型的定义,每个<style> 元素可以有多个属性。在上面的代码示例中,每个 <style> 元素都有其自己的一套属性。不过,以下两个属性是共同所有:
name
type.
这两个属性对于每个样式定义是强制性的
格式: name='stylename'
<style name='MyFirstFontStyle' type='font' face='Verdana' …/>
<style name='MyFirstAnimationStyle' type='animation' …/>
<style name='MyFirstShadow' type='Shadow' …/>
样式名只能包含字母和数字。标点符号(包括下划线)不应该被使用
样式名必须是唯一的,也即iushishuo,两个样式定义不能有相同的名称,因为会引起冲突
Font
Animation
Shadow
Glow
Blur
Bevel
因此,类型属性为上面6个值之一。在我们的例子中,我们定义第一个样式“字体”,第二个样式“动画”,第三个样式“阴影”,这是自解析的。
格式: type='parameter' (必须为 'Font' 或 'Animation' 或 'Shadow' 或 'Glow' 或 'Blur' 或 'Bevel')
<style name='MyFirstFontStyle' type='font' face='Verdana' …/>
<style name='MyFirstAnimationStyle' type='animation' …/>
<style name='MyFirstShadow' type='Shadow' …/>
现在,如果你已经渴望为图表对象应用样式,让我们开始这个应用程序故事的一部分
例如我们已经为2D单系列柱状图对象定义:
对象名 | 描述 | 功能支持 | 动画参数支持 Supported |
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 |
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 |
<apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />
<apply toObject='Canvas' styles='MyFirstAnimationStyle' />
<apply toObject='DataPlot' styles='MyFirstShadow' />
</application>
格式: <apply toObject='Object' styles='Style1, Style2, Style3 ...' />
你需要确认几件事情:
要为图表对象应用多个样式,需要使用逗号分隔样式名.
如., <apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />
要为图表对象应用多个样式,你需要为每个对象元素定义 <apply> 然后为它指定样式
如,
<apply toObject='Caption' styles='MyFirstShadow' />
<apply toObject='DataPlot' styles='MyFirstShadow' />
你不能 您不能应用由逗号分隔的对象名单,然后分配给它一个单一的风格 - 以下将被视为无效
<apply toObject='Caption,DataPlot' styles='MyFirstShadow' />
在前面样式定义中定义的样式名称的拼写是否正确,否则FusionCharts会忽略它并在调试窗口记录错误
现在你已经对样式定义和应用熟悉了,接下来我们会看来每个样式支持的参数列表,我们从字体属性开始
相关文章推荐
- FusionChart完全入门手册5
- FusionChart完全入门手册7
- FusionChart完全入门手册8
- FusionChart完全入门手册 -1
- FusionChart完全入门手册9
- FusionChart完全入门手册4-开启实例化讲解
- FusionChart完全入门手册4
- FusionChart完全入门手册-3
- 发布NBearLite中文版完全参考手册 + NBearLite 10分钟入门教程 + NBearLite v1.0.0.7 beta
- FusionCharts完全入门手册13
- FVWM新手入门不完全手册
- FusionCharts完全入门手册14---图表XML快速指南1(图表边框和背景)
- fusionchart jsp入门步骤
- Fusionchart 手册
- Fvwm新手入门不完全手册
- Fvwm新手入门不完全手册(转载)
- FusionCharts完全入门手册10
- FVWM新手入门不完全手册
- FusionChart完全入门手册 -2
- FusionCharts完全入门手册11