FCF中文指南-第七章--FusionCharts Free和XML

FusionCharts使用XML来创建和控制图形。

7.1数据类型

在FCF里，一共有四种数据类型。

Boolean - 它的值为0或1，1表示true，0表示false。例如<graph showNames='1' >。

Number - 它的值应该是一个数值。例如<graph yAxisMaxValue='200' > 。

String - 它的值是一个字符串。例如<graph caption='My Chart' > 。

Hex Color Code - 它表示一个16进制的颜色，不需要用“#”。例如<graph bgColor='FFFFDD' >。

每个图形都有很多属性，我们都可以通过XML对它进行设置，但是，我们并不需要对每一个属性都进行设置，因为它们都有一个默认值，如果我们没有设置，FCF会使用默认值来替代。

FCF里有几种类型的XML结构：

7.2单系列图形

单系列图形是指只有一个数据集的图形。例如，我们的第一个例子，每月销售情况，就是一个单系列图形（我们只有一年的数据）。我们并没有对数据进行比较，例如，比较两年的每月销售情况。

我们看看下面的例子。

1. <graph caption='Business Results 2006' xAxisName='Month' yAxisName='Revenue' showValues='0'

2. numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1'

3. divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1' alternateHGridColor='f8f8f8'

4. alternateHGridAlpha='60' >

5. <set name='Jan' value='27400' color='AFD8F8'/>

6. <set name='Feb' value='29800' color='F6BD0F' />

7. <set name='Mar' value='25800' color='8BBA00'/>

8. <set name='Apr' value='26800' color='FF8E46'/>

9. <set name='May' value='29600' color='008E8E' />

10. <set name='Jun' value='32600' color='D64646'/>

11. <set name='Jul' value='31800' color='8E468E'/>

12. <set name='Aug' value='36700' color='588526'/>

13. <set name='Sep' value='29700' color='B3AA00'/>

14. <set name='Oct' value='31900' color='008ED6'/>

15. <set name='Nov' value='34800' color='9D080D'/>

16. <set name='Dec' value='24800' color='A186BE' />

17.

18. <trendlines>

19. <line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>

20. </trendlines>

21.

22. </graph>

上面的代码里多了一些我们没接触过的属性，没关系，在图形XML参考一章我们将详细介绍所有的图形可用的属性。

下面进行一下简单的解释

<graph>元素是所有FCF XML文档的主元素。它描述数据的开始和结束。它还有一些属性可以控制图形。这些属性我们在图形XML参考一章会讲到。

<set>元素是<graph>的子元素，它描述一个数据集，这个数据集决定了图形上的数据。一个典型的<set>元素看起来就像这样：

1. <set name='Jan' value='27400' color='AFD8F8' hoverText="January, 17400" link="details.asp?month=jan" showName="1"/>

<trendLines> 元素，它可以在图形上画出一条趋势线。例如，下面的代码里，我们在26000这个值画出了一条线，用来表示月平均销售额。

1. <line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/>

7.3多系列图形

多系列图形被用来比较两个或更多的数据集。

我们看看下面的代码。

<?xml version="1.0" encoding="UTF-8"?>
<graph caption='Business Results 2005 v 2006' PYAxisName='Revenue'SYAxisName='Quantity' xAxisName='Month' showValues='0'decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1'divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'alternateHGridColor='f8f8f8' alternateHGridAlpha='60' SYAxisMaxValue='750'><categories><category name='Jan' /><category name='Feb' /><category name='Mar' /><category name='Apr' /><category name='May' /><category name='Jun' /><category name='Jul' /><category name='Aug' /><category name='Sep' /><category name='Oct' /><category name='Nov' /><category name='Dec' /></categories>

<dataset seriesName='2006' parentYAxis='P' color='c4e3f7'
        numberPrefix='$'>
        <set value='27400' />
        <set value='29800' />
        <set value='25800' />
        <set value='26800' />
        <set value='29600' />
        <set value='32600' />
        <set value='31800' />
        <set value='36700' />
        <set value='29700' />
        <set value='31900' />
        <set value='34800' />
        <set value='24800' />
    </dataset>
    <dataset seriesName='2005' parentYAxis='P' color='Fad35e'
        numberPrefix='$'>
        <set value='10000' />
        <set value='11500' />
        <set value='12500' />
        <set value='15000' />
        <set value='11000' />
        <set value='9800' />
        <set value='11800' />
        <set value='19700' />
        <set value='21700' />
        <set value='21900' />
        <set value='22900' />
        <set value='20800' />
    </dataset>
    <dataset seriesName='Total Quantity' parentYAxis='S' color='8BBA00'
        anchorSides='10' anchorRadius='3' anchorBorderColor='009900'>
        <set value='270' />
        <set value='320' />
        <set value='290' />
        <set value='320' />
        <set value='310' />
        <set value='320' />
        <set value='340' />
        <set value='470' />
        <set value='420' />
        <set value='440' />
        <set value='480 ' />
        <set value='360' />
    </dataset>
</graph>

我们发现，上面多了一个 <categories>元素，它包含很多的子元素，如

1. <category name='Jan' />

每个<category>就表示X轴上的一个名称。

上面还有两个<dataset>元素，一个用来表示2006年的数据，一个表示2005年。每个<set>则表示图形上的一个数据。

注意<categories>的子元素的数量应该和<dataset>子元素的一致。

8.1什么是组合图形

当我们想在一张图形里表示多个图形类型时，我们就要用到组合图。FCF提供了双Y轴组合图，它有两个Y轴，每个轴表示不同的刻度（例如，收益和数量，或者访问量和下载量等等。）。图形左边的坐标轴叫主坐标轴，图形右边的叫次坐标轴。

FCF里组合图分为2D和3D，下面的图形就是一个2D双Y轴组合图。

这个图里有月销售额和数量，X轴表示月份。现在我们来看看这两个Y轴：

主Y轴表示2005和2006的销售额，柱状图和这个主Y轴对应。

次Y轴表示数量，曲线图和次Y轴对应。

在双Y轴图形里，我们必须提供至少两个数据集，一个对应主Y轴，一个对应次Y轴。如果你没有提供两个，图形就不会正确显示。

8.2代码

上图的XML代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<graph caption='Business Results 2005 v 2006' PYAxisName='Revenue'SYAxisName='Quantity' xAxisName='Month' showValues='0'decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' showColumnShadow='1'divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'alternateHGridColor='f8f8f8' alternateHGridAlpha='60' SYAxisMaxValue='750'><categories><category name='Jan' /><category name='Feb' /><category name='Mar' /><category name='Apr' /><category name='May' /><category name='Jun' /><category name='Jul' /><category name='Aug' /><category name='Sep' /><category name='Oct' /><category name='Nov' /><category name='Dec' /></categories><dataset seriesName='2006' parentYAxis='P' color='c4e3f7' numberPrefix='>

 <set value='27400' /><set value='29800' /><set value='25800' /><set value='26800' /><set value='29600' /><set value='32600' /><set value='31800' /><set value='36700' /><set value='29700' /><set value='31900' /><set value='34800' /><set value='24800'
/></dataset><dataset seriesName='2005' parentYAxis='P' color='Fad35e' numberPrefix='><set value='10000' /><set value='11500' /><set value='12500' /><set value='15000' /><set value='11000' /><set value='9800' /><set value='11800' /><set value='19700' /><set
value='21700' /><set value='21900' /><set value='22900' /><set value='20800' /></dataset><dataset seriesName='Total Quantity' parentYAxis='S' color='8BBA00'anchorSides='10' anchorRadius='3' anchorBorderColor='009900'><set value='270' /><set value='320' /><set
value='290' /><set value='320' /><set value='310' /><set value='320' /><set value='340' /><set value='470' /><set value='420' /><set value='440' /><set value='480 ' /><set value='360' /></dataset></graph>

8.3简单解释

这个组合图的XML和一个多系列图形的XML较为类似，因此，我们只解释以下不同的地方。

在双Y轴组合图里，有两个Y轴，每个Y轴都可以有它自己的刻度和数值格式属性。

PYAxisName表示主轴的名称，SYAxisName表示次轴的名称。

在每个数据集里，我们都必须用parentYAxis属性来指定它是属于哪个轴。这个属性的值只能是“P”或“S”。P代表主轴，S代表次轴。例如我们的代码里，在主轴上有两个销售额数据集--“2005”和“2006”：

68. <dataset seriesName='2006' parentYAxis='P' ... >

69.

70. ...

71.

72. <dataset seriesName='2005' parentYAxis='P' ... >

在次轴上有一个数量数据集：

1. <dataset seriesName='Total Quantity' parentYAxis='S' ... >

上面的例子里，数量数据集表示的是2005和2006当月数量的总数。实际上，我们可以在次轴上也设置两个数据集，一个表示2005年每月的数量，一个表示2006年的。大家可以自己练习一下。

8.4注意

在运行这个例子是，Flash文件应该使用FCF_MSColumn2DLineDY.swf，从上图我们可以看出，它是column和line的组合，因此要用FCF_MSColumn2DLineDY.swf。

FCF中文指南-第七章--FusionCharts Free和XML相关推荐

FCF中文指南-第三章--FusionCharts Free我的第一个图形
在介绍完了FCF的下载安装以后,现在,我们终于要开始创建我们的第一个图表了.我们将要创建一个简单的3D柱状图形,用它来展示每月销售情况摘要. 要使用FCF来创建图形,你需要做下面三件事情:1.选择好你 ...
Java7并发编程指南——第七章：定制并发类
Java7并发编程指南--第七章:定制并发类 @(并发和IO流) Java7并发编程指南第七章定制并发类思维导图项目代码思维导图项目代码 GitHub:Java7ConcurrencyCook ...
FCF中文指南-第一章--FusionCharts Free介绍
第一章--FusionCharts Free介绍 FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有 ...
机试指南第七章-动态规划-笔记及背包问题
第七章动态规划一.递归求解: 递归问题的关键是解决初始值和递推公式,从而将复杂问题分解为简单问题直至初始值对应的极简问题,从而得到答案. 套路:初始值+递归公式. Trick:将求出的值存 ...
Kali Linux 无线渗透测试入门指南第七章高级 WLAN 攻击
第七章高级 WLAN 攻击作者:Vivek Ramachandran, Cameron Buchanan 译者:飞龙协议:CC BY-NC-SA 4.0 简介知己知彼,百战不殆. 孙子,< ...
FCF中文指南-第二章--FusionCharts Free安装
本文将介绍FusionCharts Free V2.1的下载及安装. 2.1下载你可以在下面的地址下载它. http://www.fusioncharts.com/goodies/fusioncha ...
ZeroMQ 中文指南第四章可靠的请求-应答模式【转载】
此文章转载自GitHub : https://github.com/anjuke/zguide-cn 作者信息如下. ZMQ 指南作者: Pieter Hintjens ph@imatix.com, ...
Palabos User Guide中文解读 | 第七章 | Palabos的模型
作者的话:本人在学习palabos时,发现国内中文资料甚少,恰好网上可以直接搜到palabos user guide这种英文资料,加之时间充裕,便打算开始翻译,翻了一节后发现这可能算侵权,就比较伤脑筋 ...
07 Confluent_Kafka权威指南第七章：构建数据管道
文章目录 CHAPTER 7 Building Data Pipelines 构建数据管道将数据集成到上下文 Considerations When Building Data Pipelines ...

FCF中文指南-第七章--FusionCharts Free和XML

FCF中文指南-第七章--FusionCharts Free和XML相关推荐

最新文章

热门文章