FusionChart完全入门手册6

如何使用样式

  要使用在FusionCharts的样式功能，您首先需要在XML数据文件定义样式。要定义样式，使用下面的XML：

 

<chart>

<!-- 这里是你的数据 -->

<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> 父元素下面.在你的XML 代码中包含包含所有的样式. FusionCharts 不识别 <styles> 父元素之外的任何样式定义

<styles> 元素的子元素是<definition> 和 <application> 元素. 顾名思义, <definition> 元素包含您的图表定义自定义样式 而根据<application> 元素，你自定义的样式套用您对不同的图表对象。

现在，让我们首先要定义样式。

  定义你的样式

通过上面的XML代码，你会看到我们定义了三个自定义样式，即：

• MyFirstFontStyle, 这将有助于我们设置图表上的字体属性.
• MyFirstAnimationStyle, 将帮助我们设置图表对象动画
• MyFirstShadow 可以使任何一个图表对象的阴影效果.

每个样式定义要使用<style> 元素. 多个样式元素可以放在另一个<definition> 元素中. 因此如果你想定义5个自定义样式，你需要创建5个<style>元素.

根据不同的风格类型的定义，每个<style> 元素可以有多个属性。在上面的代码示例中，每个 <style> 元素都有其自己的一套属性。不过，以下两个属性是共同所有：

1. name
2. type.

这两个属性对于每个样式定义是强制性的

  强制属性 样式名 Name 属性可以让你指定的样式定义您的自定义名称。例如，在上面的代码中，我们有一个名为作为MyFirstFontStyle，这很可能已经JohnFirstStyle或GlobalFont或BigFont等字体样式

格式： name='stylename'

例子
<style name='MyFirstFontStyle' type='font' face='Verdana' …/>
<style name='MyFirstAnimationStyle' type='animation' …/>
<style name='MyFirstShadow' type='Shadow' …/>

样式名没有什么限制，除非下面的指示:

• 样式名只能包含字母和数字。标点符号（包括下划线）不应该被使用
• 样式名必须是唯一的，也即iushishuo，两个样式定义不能有相同的名称，因为会引起冲突

样式类型

每个样式需要确定它是什么类型。该类型定义这个样式要做的事情。 FusionCharts v3的支持6种方式:

• 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' …/>

如果你没有定义一个特定的样式类型，FusionCharts将忽略样式定义并记录一个错误在调试窗口。

 

其他属性

该元素的样式属性其余的都是依赖于它的类型。例如，我们可以为FONT 样式使用face, size, color, bold 等属性。然而，没有定义ANIMATION样式，这些参数为动画没有任何意义。每种风格类型都有它自己的属性，因此，您可以指定将讨论下一组。.

现在，如果你已经渴望为图表对象应用样式，让我们开始这个应用程序故事的一部分

  图表对象应用自定义的样式

要应用样式的定义图表对象，你首先需要确保你的图表对象的每个图表的名单。这可以在这里找到了“图表的XML表”为每个图表.

例如我们已经为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

 

每个图有一个不同的对象列表。所以，你需要确保你对给定图表对象名定义正确

 

现在，下面的XML应用样式为不同的图表对象工作：

<application>
   <apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />
   <apply toObject='Canvas' styles='MyFirstAnimationStyle' />
   <apply toObject='DataPlot' styles='MyFirstShadow' />
</application>  

每个 <apply> 元素对一个图表对象应用多个样式，比如在我们代码中，我们首先为图表标题应用MyFirstFontStyle字体样式的，然后对同一个对象应用阴影样式MyFirstShadow。要应用多个样式，我们分别以逗号分隔样式的名字。

格式: <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会忽略它并在调试窗口记录错误

现在你已经对样式定义和应用熟悉了，接下来我们会看来每个样式支持的参数列表，我们从字体属性开始