分类目录

链接

2014年六月
« 4月   7月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30  

近期文章

热门标签

博主推荐

现在位置:    首页 > JS/JQUREY/CSS > 正文
FusionCharts参数说明2
JS/JQUREY/CSS 暂无评论 阅读(4,825)

图表组件常用参数说明2:

animation                     是否动画显示数据,默认为 1(True)
showNames                     是否显示横向坐标轴(x轴)标签名称
rotateNames                 是否旋转显示标签,默认为0(False):横向显示
showValues                     是否在图表显示对应的数据值,默认为1(True)
yAxisMinValue                 指定纵轴(y轴)最小值,数字
yAxisMaxValue                  指定纵轴(y轴)最小值,数字
showLimits                     是否显示图表限值(y轴最大、最小值),默认为1(True)
showColumnShadow      是否显示各条形图间的阴影(若柱面图在一起并列的话)
showAlternateHGridColor 是否隔行显示不同颜色
图表标题和轴名称
caption                     图表主标题
subCaption                     图表副标题
xAxisName                     横向坐标轴(x轴)名称
yAxisName                     纵向坐标轴(y轴)名称
imageSave=’1′       是否保存图片
imageSaveURL=’Path/FusionChartsSave.jsp ‘图片路径

hoverCapSepChar=’,’。鼠标放到柱面上时显示的提示信息的分隔符
showhovercap=’1′          鼠标放到柱面上时是否显示提示信息
hoverCapBgColor=‘ffffff’提示信息背景颜色
图表和画布的样式
bgColor                     图表背景色,6位16进制颜色值
canvasBgColor                 画布背景色,6位16进制颜色值
canvasBgAlpha                 画布透明度,[0-100]
canvasBorderColor             画布边框颜色,6位16进制颜色值
canvasBorderThickness         画布边框厚度,[0-100]
shadowAlpha                 投影透明度,[0-100]
showLegend                     是否显示系列名,默认为1(True)

字体属性
baseFont                     图表字体样式
baseFontSize                 图表字体大小
baseFontColor                 图表字体颜色,6位16进制颜色值
outCnvBaseFont                 图表画布以外的字体样式
outCnvBaseFontSize             图表画布以外的字体大小
outCnvBaseFontColor         图表画布以外的字体颜色,6位16进制颜色值

分区线和网格
numDivLines                 画布内部水平分区线条数,数字
divLineColor                 水平分区线颜色,6位16进制颜色值
divLineThickness             水平分区线厚度,[1-5]
divLineAlpha                 水平分区线透明度,[0-100]
showAlternateHGridColor     是否在横向网格带交替的颜色,默认为0(False)
alternateHGridColor         横向网格带交替的颜色,6位16进制颜色值
alternateHGridAlpha         横向网格带的透明度,[0-100]
showDivLineValues             是否显示Div行的值,默认??
numVDivLines                 画布内部垂直分区线条数,数字
vDivLineColor                 垂直分区线颜色,6位16进制颜色值
vDivLineThickness             垂直分区线厚度,[1-5]
vDivLineAlpha                 垂直分区线透明度,[0-100]
showAlternateVGridColor     是否在纵向网格带交替的颜色,默认为0(False)
alternateVGridColor         纵向网格带交替的颜色,6位16进制颜色值
alternateVGridAlpha         纵向网格带的透明度,[0-100]

数字格式
numberPrefix                 增加数字前缀
numberSuffix                 增加数字后缀     % 为 ‘%25′ / (吨)为‘%ef%bc%88%e5%90%a8%ef%bc%89’(Server.UrlEncode编码)
formatNumberScale         是否格式化数字,默认为1(True),自动的给你的数字加上K(千)或M(百万);若取0,则不加K或M
decimalPrecision             指定小数位的位数, [0-10]     例如:=’0′ 取整
divLineDecimalPrecision     指定水平分区线的值小数位的位数, [0-10]
limitsDecimalPrecision         指定y轴最大、最小值的小数位的位数,[0-10]
formatNumber                 逗号来分隔数字(千位,百万位),默认为1(True);若取0,则不加分隔符
decimalSeparator             指定小数分隔符,默认为’.’
thousandSeparator             指定千分位分隔符,默认为’,’

Tool- tip/Hover标题
showhovercap                 是否显示悬停说明框,默认为1(True)
hoverCapBgColor             悬停说明框背景色,6位16进制颜色值
hoverCapBorderColor         悬停说明框边框颜色,6位16进制颜色值
hoverCapSepChar             指定悬停说明框内值与值之间分隔符,默认为’,’

折线图的参数
lineThickness                 折线的厚度
anchorRadius                 折线节点半径,数字
anchorBgAlpha                 折线节点透明度,[0-100]
anchorBgColor                 折线节点填充颜色,6位16进制颜色值
anchorBorderColor             折线节点边框颜色,6位16进制颜色值

Set标签使用的参数
value                         数据值
color                         颜色
link                         链接(本窗口打开[Url],新窗口打开[n-Url],调用JS函数[JavaScript:函数])
name                         横向坐标轴标签名称

showFCMenuItem=’0′ 设置右键显示不显示

1. varmyChart= newFusionCharts(“../FusionCharts/FCF_Column3D.swf”, “myChartId”, “600”, ”
500″);
第一个参数是SWF 文件的地址。
第二个是图形的id。这个id 你可以随便叫什么,但是要注意,在后面我们讲到一个页面里有
多个图形的时候,这个id 一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
1. myChart.setDataURL(“Data.xml”);
最后,我们把图形渲染在指定的地方。
1. myChart.render(“chartdiv”);
“chartdiv”就是前面的DIV 的id,这就表示把图形render 到”chartdiv”。
现在你运行JSChart.html,你会看到同Chart.html 一样的效果。很显然使用JavaScript 加载
图形,更方便,更直观。

如果你想在一个新的窗口打开页面,只需要在连接的前面加上“n-”,就像下面的代码一样:
1. <graph caption=’Monthly Sales Summary’ subcaption=’For the year 2006 ‘
2. xAxisName=’Month’ yAxisName=’Sales’ numberPrefix=’$’>
3. <set name=’Jan’ value=’1 7400′ link=’n-DemoLinkPages/DemoLink1.html’ color=’AFD8F8′ />

XML数据节点和常用属性详解
caption=‘标题‘
subcaption=‘子标题‘
clickURL=‘abc.jsp‘ 点击整个图表时跳转到abc.jsp
xAxisName=部门‘
numberPrefix =‘¥’ 数据前缀单位
numberSuffix =‘个’ 数据后缀单位
Decimals=‘2’ 保留两位小数,四舍五入
forceDecimals=‘2’ 强制保留两位小数,对于5.1 转换为5.10
yAxisName=‘完成率’
如果使用汉字汉符需加属性:rotateYAxisName=‘1’
showValues=‘1’
yAxisMaxValue=‘100’
对于百分比的常用bgColor=’999999,FFFFFF‘
渐变bgColor=‘999999 ’ 单色
useRoundEdges=‘1’ 光线效果
baseFont=‘宋体‘
baseFontSize=’12’
baseFontColor=’333333′

图片组件使用简介:

1–WebChart 图形的基本元素

在我们了解了WEBCHART 的各种使用方法以后,我们就会发现,其实我们要做出各种不同的Flash图形,最关键的就是那个XML 数据。它不但可以描述图形的数据,还可以描述图形的样式。

我们需要搞清楚图形的组成部分,比如什么是X 轴,什么是Y 轴,什么是图形背景,什么是是图形边框。只有了解这些以后,我们才能做出我们相应的图形。

1.1 图形背景和画布

对于3D 图形,你可以设置canvas background(画布背景)和Chart Background(图形背景)的颜色,还可以设置它们是否可见。

对于2D 图形,你可以设置canvas background color(画布背景颜色),background alpha(背景透明度),canvas border color(画布边框颜色),canvas border thickness(画布边框厚度)等属性。

1.2 Chart Labels(图形标签)

你可以设置caption(标题), sub caption(子标题), x-axis nameX 轴标签), y-axisnameY 轴标签), y-axis maxlimitY 轴最大值), y-axismin limitY 轴最小值), numberPrefix(数值前缀), numberSuffix(数值后缀),ChartLegend( 图例)。

1.3 DIV lines(刻度线)

你可以设置Trend Line(趋势线),ZeroPlane(零平面),DivLine(刻度线)等的一些属性。

1.4 Alternating(间隔色)

你可以设置AlternatingColoredHorizontalGrids(垂直表格间隔色)以及透明度,AlternatingColoredVerticalGrids(水平表格间隔色)以及透明度。

1.5 Hover Caption(提示信息)

你可以设置hovercaptionbackground–提示框的背景,hovercaptionborder 提示框的边框,hovercaptiondataseparatorcharacter–提示信息的分割字符。

6.6 Anchors(锚点)

你可以设置Anchors(锚点)的shape(形状), radius(半径), bordercolor(边框颜色), thickness(边框厚度), alpha(边框透明度), background color(背景颜色), backgroundalpha(背景透明度)等属性。

本章我们了解了一些图形基本构成元素,还了解了我们可以对它们进行哪些设置。下章我们将介绍一下的XML

 

 

 

2–WebChart XML

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

2.1 数据类型

一共有四种数据类型。

Boole an – 它的值为0 11 表示true0 表示false。例如<graph showNames=’1′ >

Number – 它的值应该是一个数值。例如<graph yAxisMaxValue=’200′ >

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

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

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

有几种类型的XML 结构:

2.2 单系列图形

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

2.3 多系列图形

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

多了一个<categories>元素,它包含很多的子元素.

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

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

 

3–WebChart 和组合图XML

我们来看看什么是组合图形,以及它的XML 是怎么写的。

3.1 什么是组合图形

当我们想在一张图形里表示多个图形类型时,我们就要用到组合图。提供了双Y

轴组合图,它有两个Y 轴,每个轴表示不同的刻度(例如,收益和数量,或者访问量和下载量等等。)。图形左边的坐标轴叫主坐标轴,图形右边的叫次坐标轴。

组合图分为2D 3D.

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

3.2 简单解释

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

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

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

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

2008”和“2009”:

<dataset seriesName=‘2008’ parentYAxis=‘P’ >

<dataset seriesName=‘2009’ parentYAxis=‘P’ >

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

<dataset seriesName=‘Total Quantity’ parentYAxis=‘S’ >

上面的例子里,数量数据集表示的是2008 2009 当月数量的总数。实际上,我们可以在次轴上也设置两个数据集,一个表示2008 年每月的数量,一个表示2009 年的。

 

3.3 注意

在运行这个例子是,Flash 文件应该使用WEBCHART_MSColumn2DLineDY.swf,从上图我们可以

看出,它是column line 的组合,因此要用WEBCHART_MSColumn2DLineDY.swf。更多的图形和Flash文件的对应关系,请参见调用例子。

 

 

 

4–动态改变图形的类型和数据

在前面的介绍里,我们已经了解了图形的基本使用方法以及图形XML,现在我们已经有能力做出基本的图形了,如果你现在就把它应用到你的项目里,我认为没有任何问题,而且我也相信你还能举一反三地,发展出一些“新”的用法。

那我们就开始吧。

4.1 动态改变图形的类型

在项目中,我们有时会需要在页面上方便地改变图形的类型,当然,如果页面不刷新就能看到改变的结果,那是最理想的。举个例子来说,在一个页面上,显示了一 个月销售额的柱状图,但用户要求还可以查看月销售额的饼图,区域图。要实现这个需求,一般的做法是,再做两个页面,一个显示饼图,一个显示区域图,用户想 看这两个图,点击连接就可以了。这样的做法并没有什么不妥。你还可以采用AJAX 技术,来实现页面无刷新,这样用户的体验会更好一些。只是程序员累一点而已。

难道我们一定要这么累吗?不!其实我们可以有更好的办法,为你的报表解决方案。

那么,是怎么实现上面的需求的呢?简单点说,思路是这样的:

1、使用JavaScript 加载第一个图形(如柱状图),至于是用dataXML 方法,还是dataURL 方法,都可以。

2、当需要改变图形类型(如改成饼图)时,我们再创建一个新的WebChart 类实例(它的SWF文件是饼图),把它render 到原来的DIV

就是这么简单。

我们来看看代码吧。

<HTML>

<HEAD>

<SCRIPT LANGUAGE=“Javascript” SRC=“../../WebChart/WebChart.js”></SCRIPT>

<SCRIPT LANGUAGE=“JavaScript”>

//数据

var strXML = “<graph caption=‘Hours worked’ showNames=‘1 ‘> <set name=‘Tom ‘ value=‘3

2′ color=‘AFD8F8’/>

<set name=‘Mary’ value=‘1 6’ color=‘F6 BD0F’/><set name=‘Jane’ value=‘4 2’ color=‘8BBA00’

/></graph>“;

/*

* 当用户单击按钮时调用这个方法。

* 这个方法用来使用新的SWF 文件创建一个新的WebChart 实例。

*/

function updateChart(chartSWF){

//Create another instance of the chart.

var chart1 = new WebChart(chartSWF, “chart1Id”, “4 00”, “3 00”, “0”, “0”);

chart1.setDataXML(strXML);

chart1.render(“chart1div”);

}

</SCRIPT>

</HEAD>

<BODY>

<div id=“chart1div”>

WebChart

</div>

<script language=“JavaScript”>

var chart1 = new WebChart(“../../WebChart/WEBCHART_Column3D.swf”, “chart1Id”, “4 00″,”3 00”, “0”, “0”);

chart1.setDataXML(strXML);

chart1.render(“chart1div”);

</script>

 

<form name=‘frmUpdate’>

Show as:

<input type=‘button’ value=‘Column’ onClick=“javaScript:updateChart(‘../../WebChart/F

CF_Column3D.swf’);” name=‘btnColumn’ />

<input type=‘button’ value=‘Line’ onClick=“javaScript:updateChart(‘../../WebChart/WEBCHART

_Line.swf’);” name=‘btnLine’ />

<input type=‘button’ value=‘Pie’ onClick=“javaScript:updateChart(‘../../WebChart/WEBCHART_

Pie3D.swf’);” name=‘btnPie’ />

</form>

</CENTER>

</BODY>

</HTML>

上面的代码非常浅显,就不做解释了。

4.2 动态改变图形的数据

我们已经会动态改变图形的类型了,动态改变数据和上面的原来一样,我们只需要在新建

实例的时候,传入新的数据就可以了。

那么为什么还要单独来讲解这个呢?因为WebChart 给我们提供了一个更简单的方法,那就是updateChartXML(domid,data)。它的第一个参数就是我们在创建WebChart 实例时设置的图形domid,第二个参数是XML 数据字符。

来看看下面的代码。

<HTML>

<HEAD>

<TITLE>WebChart & JavaScript – Updating chart using setDataXML() Method</TI

TLE>

<SCRIPT LANGUAGE=“Javascript” SRC=“../../WebChart/WebChart.js”></SCRIPT>

<SCRIPT LANGUAGE=“JavaScript”>

function updateChart(DOMId){

updateChartXML(domId,”<graph><set name=‘A’ value=‘3 2’ /></graph>“);

}

</SCRIPT>

</HEAD>

<BODY>

<div id=“chart1div”>

 WebChart

 </div>

 <script language=“JavaScript”>

var chart1 = new WebChart(“../../WebChart/WEBCHART_Column3D.swf”, “chart1Id”, “4 00”, “3 00”);

chart1.setDataXML(“<graph><set name=‘A’ value=‘1 0’ color=‘D6 4646’ /><set name=‘B’ value=‘1 1’ color=‘AFD8F8’ /></graph>“);

chart1.render(“chart1div”);

</script>

<form name=‘frmUpdate’>

<input type=‘button’ value=改变数据 onClick=“javaScript:updateChart(‘chart1Id’);” name=‘btnUpdate’>

</form>

</HTML>

当我们单击”改变数据“按钮后,会调用updateChart()方法,它会使用新的数据来重新构建图形。

 

下章我们来讲讲的下钻图形,听上去很专业,其实就是图形的连接,包括超连接,

JavaScript

 

 

5–WEBCHART 中的下级链接

在我们开发图形报表时,你可能会遇到这样的需求:用户要求点击柱状图的某根柱子,可查看它的详细数据。其他的一些基于java 的图形报表组件,如jfreechart,也可以实现加连接

的功能,但是使用起来还是有点麻烦的。其实它不光是加连接麻烦,正个使用起来都很麻烦,

需要你在后台编写大量的代码。通过前面的章节,你应该知道,webChart 的使用非常简单,你只需要关注你的数据如何产生就可以了。至于如何产生图形,并不需要你编一行代码。加连接也是如此。

WEBCHART 支持三种类型的连接:

1、普通的超链接,在同一个窗口打开新的页面。

2、普通的超链接,在新窗口打开新的页面。

3JavaScript 连接。

5.1 普通的超链接

我们先来看看第一种情况。

想要在WEBCHART 图形里加连接,你只需要在数据集里加上一个link 属性即可。如下:

1. <set … value=’2235′ … link= ‘ShowDetails.jsp%3FMonth%3DJan’ …>

我们发现URL 是经过了编码的。是的,因为你的连接里可能会含有“?”,“&”等字符,所以需要编码。WEBCHART 在载入这个连接时, 会对它进行解码, 解码后上例中的连接就是

ShowDetails.jsp?Month=Jan”。

我们看一个完整的例子。

<graph caption= subcaption=

xAxisName=‘Month’ yAxisName=‘Sales’ numberPrefix=‘$’ >

<set name=‘Jan’ value=‘1 7400’ link=‘DemoLinkPages/DemoLink1.html’ color=‘AFD8F8’ />

<set name=‘Feb’ value=‘1 9800’ link=‘DemoLinkPages/DemoLink2.html’ color=‘F6 BD0F’ />

<set name=‘Mar’ value=‘2 1800’ link=‘DemoLinkPages/DemoLink3.html’ color=‘8BBA00’ />

<set name=‘Apr’ value=‘2 3800’ link=‘DemoLinkPages/DemoLink4.html’ color=‘FF8E46’ />

<set name=‘May’ value=‘2 9600’ link=‘DemoLinkPages/DemoLink5.html’ color=‘008E8E’ />

<set name=‘Jun’ value=‘2 7600’ link=‘DemoLinkPages/DemoLink6.html’ color=‘D6 4646’ />

</graph>

如果把上面的数据用柱状图来显示,结果如下:

当我们把鼠标移到每个柱子上时,鼠标会变成连接样式,点击它,就会在新的窗口里打开相应的页面。

5.2 新窗口超链接

如果你想在一个新的窗口打开页面,只需要在连接的前面加上“n-”,就像下面的代码一样:

 <graph caption= subcaption=‘ ‘

 xAxisName=‘Month’ yAxisName=‘Sales’ numberPrefix=‘$’>

 <set name=‘Jan’ value=‘1 7400’ link=‘n-DemoLinkPages/DemoLink1.html’ color=‘AFD8F8’ />

 <set name=‘Feb’ value=‘1 9800’ link=‘n-DemoLinkPages/DemoLink2.html’ color=‘F6 BD0F’ />

<set name=‘Mar’ value=‘2 1800’ link=‘n-DemoLinkPages/DemoLink3.html’ color=‘8BBA00’ />

<set name=‘Apr’ value=‘2 3800’ link=‘n-DemoLinkPages/DemoLink4.html’ color=‘FF8E46’ />

 <set name=‘May’ value=‘2 9600’ link=‘n-DemoLinkPages/DemoLink5.html’ color=‘008E8E’ />

 <set name=‘Jun’ value=‘2 7600’ link=‘n-DemoLinkPages/DemoLink6.html’ color=‘D6 4646’ />

 </graph>

5.3 JavaScript 连接

我们还可以加上JavaScript 连接,在连接里,你可以调用任何在本页可以调用到的

JavaScript 函数。如下:

<set name=‘Japan’ value=‘1 23’ link=“JavaScript:myJS(‘Japan, 123’);” color=‘F6 BD0F’/>

 

6–WEBCHART 中的基本数字格式

在我们的报表里,经常要对数值进行一些格式化,如小数位,千分位等等。这在WEBCHART

实现起来非常容易。下面我们就来看看。

6.1 控制小数位位数

所有的WEBCHART 图形都支持decimalPrecision 属性,这个属性是用来指定小数位的位数的。如果你没有指定这个属性的值,那么WEBCHART 默认会显示小数位后面2 位小数。这个属性是全局的,也就是说,它对这个图形上的所有数字都起作用。例如,如果你设置decimalPrecision=’0′,那么像这些12.43213.413,就会显示成121313

同样的,如果你有0.124320.134 0.13 等数据,并且没有指定decimalPrecision 的值,

那么WEBCHART 就会显示成0.120.130.13。如果你把decimalPrecision 设置成4,那么就会显示成0.12430.13400.1300

6.2 自动格式化数字

WEBCHART 会自动的给你的数字加上K(千)或M(百万),如下图。

上图中,三个数字分别代表125001340013300WEBCHART 会自动地把这些数字转化为以千为单位,或是以百万为单位。

如果你不想这样,你就加上如下的代码:

<graph formatNumberScale=’0′..decimalPrecision= ‘0’…>

效果如下:

现在显示的是全部的数字了。不过,它还加了一些逗号来分隔这些数字。如果你不喜欢这样,你就加上formatNumber=0。但是,如果设置了formatNumber=0,那么就不能格式化小数位了。

看起来代码就像这样:

<graph … formatNumber=’0′ formatNumberScale=’0′ ..decimalPrecision= ‘0’…>

效果是这样:

6.3 自定义千分位和小数分隔符

WEBCHART 默认使用“.”作为小数分隔符,使用“,”作为千分位分隔符。这也是我们的使用习惯。

如果你想改成其他的,也可以。

我们使用decimalSeparator 指定小数分隔符,使用thousandSeparator 指定千分位分隔符。例如,

我们想把小数分隔符和千分位分隔符调换一下:

 <graph … decimalSeparator=’,’ thousandSeparator=’.’ >

 

6.4 增加数字前缀和后缀

WEBCHART 允许我们给所有的数字都加上前缀和后缀。

如果我们设置numberPrefix=’$’,那么会在所有的数字前面就会加上“$”,就像这样: $40000,

$50000

如果我们设置numberSuffix=’%25′,那么会在所以的数字后面加上“%”,就像这样:43%39%

我们注意到,“%”是经过了编码的。在WEBCHART 里,一些特殊的编码都需要经过编码。下一节我们会详细介绍特殊字符。

 

 

 

7–WEBCHART 中的特殊字符

WEBCHART 里,如果要在图形里用到一些特殊的字符,你就要对它进行编码,否则就无法显示。

7.1 欧元符号

WEBCHART 里显示“€”,你需要用“%80”来替换它。如下:

<graph decimalPrecision=’0′ numberPrefix=’%80 ‘>

<set name=’John’ value=’420′ color=’AFD8F8′ />

<set name=’Mary’ value=’295′ color=’F6BD0F’ />

<set name=’Tom’ value=’523′ color=’8BBA00′ />

</graph>

上面的代码会在数字前面都加上“€”。

7.2 英镑符号

WEBCHART 里显示“£”,你需要用“%A3”来替换它。如下:

<graph decimalPrecision=‘0’ numberPrefix=‘%A3 ‘>

<set name=‘John’ value=‘4 20’ color=‘AFD8F8’ />

<set name=‘Mary’ value=‘2 95’ color=‘F6 BD0F’ />

<set name=‘Tom ‘ value=‘523’ color=‘8BBA00’ />

</graph>

上面的代码会在数字前面都加上“£”。

7.3 人民币符号

WEBCHART 里显示“¥”,你需要用“%A5”来替换它。如下:

<graph decimalPrecision=‘0’ numberPrefix=‘%A5 ‘ >

<set name=‘John’ value=‘4 20’ color=‘AFD8F8’ />

<set name=‘Mary’ value=‘2 95’ color=‘F6 BD0F’ />

<set name=‘Tom ‘ value=‘523’ color=‘8BBA00’ />

</graph>

上面的代码会在数字前面都加上“¥”。

7.4 分符号

WEBCHART 里显示“¢”,你需要用“%A2”来替换它。如下:

 

7.5 百分号符号

WEBCHART 里显示“%”,你需要用“%25”来替换它。如下:

上面的代码会在数字后面都加上“%”。

7.6 &符号

WEBCHART 里显示“&”,你需要用“&amp;”来替换它。如下:

 

7.7 >符号

WEBCHART 里显示“>”,你需要用“&gt;”来替换它。如下:

 

上面的代码最后一个数字显示为“>10”。

 

7.8 单引号符号

WEBCHART 里显示“”,你需要用“&apos;”来替换它。如下:

 

上面的代码显示为“John’s Count”。

如果你想要显示双引号,直接使用就可以了,前提是你的属性值是用单引号括起来的。如果你

的属性值是用双引号括起来的,你要显示单引号,也可以直接使用,而不必用“&apos;”来替换

它。

 

 

 

 

 

8–间断数据的处理

有时候我们的数据并不是连续的,例如我们有一个反映每个月销售额的图形,然而,五月和六月的数据我们缺失了,像这种情况我们该如何处理呢?

WEBCHART 早就想到这个问题了,我们看看下面的代码:

<graph>

<set name=’1‘ value= ‘420’ />

<set name=’2‘ value=’295’ />

<set name=’3‘ value=’523’ />

<set name=’4‘ value=’473’ />

<set name=’5‘ />

<set name=’6‘ />

<set name=’7‘ value=’354 ‘ />

<set name=’8‘ value=’457’ />

<set name=’9‘ value=’127’ />

<set name=’10‘ value=’354 ‘ />

12. <set name=’11‘ value= ‘485’ />

13. <set name=’12‘ value=’486 ‘ />

14. </graph>

我们看到,上面五月和六月的数据里,并没有value 这个属性。

如果把这样的数据放到一个柱状图里,效果如下:

在五月和六月那里没有柱子。

 

如果把这样的数据放到一个曲线图里,

同样的,五月和六月那里没有线段,它是缺失的。

如果你想连五月和六月的标签都不显示,你可以这样:

<set />

当然,你还可以干脆连<set />都不要。不过那样会让看图的人容易误解,因为人们一般都会以

为是按顺序来排列月份的。

多系列的图形也可以放置这样的断点数据。

 

本文版权归数据库之家所有,转载引用请完整注明以下信息:
本文作者:Bruce
本文地址:FusionCharts参数说明2 | 数据库之家