图表组件常用参数说明

最新推荐文章于 2024-09-25 11:41:01 发布

ooxxooxx123

最新推荐文章于 2024-09-25 11:41:01 发布

阅读量554

点赞数

分类专栏：技术文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/ooxxooxx123/article/details/84422346

版权

技术专栏收录该内容

106 篇文章 0 订阅

订阅专栏

图表组件常用参数说明：

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 name（X 轴标签）, y-axisname（Y 轴标签）, y-axis maxlimit（Y 轴最大值）， y-axismin limit（Y 轴最小值）, 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 或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 对它进行设置，但是，我们并不需要对每一个属性都进行设置，因为它们都有一个默认值，如果我们没有设置，会使用默认值来替代。

有几种类型的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”：

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

上面的例子里，数量数据集表示的是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>

//数据

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>

WebChart

</div>

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

chart1.setDataXML(strXML);

chart1.render("chart1div");

</script>

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>

function updateChart(DOMId){

updateChartXML(domId,"<graph><set name='A' value='3 2' /></graph>");

}

</SCRIPT>

</HEAD>

<BODY>

WebChart

</div>

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>

</HTML>

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

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

JavaScript。

5--WEBCHART 中的下级链接

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

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

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

WEBCHART 支持三种类型的连接：

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

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

3、JavaScript 连接。

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='$' >

</graph>

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

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

5.2 新窗口超链接

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

<graph caption='' subcaption=' '

xAxisName='Month' yAxisName='Sales' numberPrefix='$'>

</graph>

5.3 JavaScript 连接

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

JavaScript 函数。如下：

6--WEBCHART 中的基本数字格式

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

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

6.1 控制小数位位数

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