FusionCharts饼图如何让数据和百分比一起显示
[问题点数：40分，结帖人gjinge]
本版专家分：0
结帖率 50%
CSDN今日推荐
本版专家分：86741
2013年 总版技术专家分年内排行榜第六
2013年3月 总版技术专家分月排行榜第二
2014年2月 Java大版内专家分月排行榜第一2013年8月 Java大版内专家分月排行榜第一2013年5月 Java大版内专家分月排行榜第一2013年4月 Java大版内专家分月排行榜第一2013年3月 Java大版内专家分月排行榜第一2013年2月 Java大版内专家分月排行榜第一
2016年9月 Java大版内专家分月排行榜第二2013年9月 Java大版内专家分月排行榜第二2013年7月 Java大版内专家分月排行榜第二2013年6月 Java大版内专家分月排行榜第二2012年12月 Java大版内专家分月排行榜第二2012年10月 Java大版内专家分月排行榜第二
本版专家分：86741
2013年 总版技术专家分年内排行榜第六
2013年3月 总版技术专家分月排行榜第二
2014年2月 Java大版内专家分月排行榜第一2013年8月 Java大版内专家分月排行榜第一2013年5月 Java大版内专家分月排行榜第一2013年4月 Java大版内专家分月排行榜第一2013年3月 Java大版内专家分月排行榜第一2013年2月 Java大版内专家分月排行榜第一
2016年9月 Java大版内专家分月排行榜第二2013年9月 Java大版内专家分月排行榜第二2013年7月 Java大版内专家分月排行榜第二2013年6月 Java大版内专家分月排行榜第二2012年12月 Java大版内专家分月排行榜第二2012年10月 Java大版内专家分月排行榜第二
本版专家分：0
结帖率 50%
本版专家分：5
匿名用户不能发表回复！|
CSDN今日推荐      通过前面两章的讲解我们可以制作出简单的图像，但是有时候我们需要对图像进行一个精确的规划，比如设置背景颜色、设置提示信息、设置间隔颜色等等，这时就需要我们对FusionCharts的细节有比较详细的了解，只有了解了这些最基本的元素才能制作出我们想要的图像。
      FusionCharts的基本元素主要包括如下几个方面：图像背景和画布、图形标签、刻度线标签、提示信息、数据。
一、图像背景和画布。
      这个标签类主要是用于设置图像的背景、边框和对整个画布进行设置。
示例或说明
bgColor='999999,FFFFF渐变 bgColor=’999999’ 单色
背景透明度
设置范围在1-100
showBorder
图表外是否显示边框
默认二维图表显示，三维不显示
borderColor
十六进制表示去掉前面的#号
borderThickness
边框线的粗细
borderAlpha
边框透明度
背景图片或动画
保证此图片和SWF文件在同一个文件夹
bgSWFAlpha
设置背景图片的透明度
      上面是对整个画布进行控制、设置，其实我们还可以对二维的图像进行设置，其中包括：背景图片、边框以及透明度。
示例或说明
canvasbgColor
图表背景颜色
可设置单色也可以使用梯度设置渐变色
canvasbgAlpha
图表背景透明度
设置范围在1-100
canvasBorderColor
图表背景边框颜色
canvasBorderThickness
图表背景边框线粗细
canvasBorderAlpha
图表背景边框透明度
      对于透明度而已，它会随着值的变大而越不明显。下面是透明度为100和60的比较(注意边框的变化)，
二、图形标签
      图形标签主要是用于表现图像的数据轴、名称、字体等等及其相关的属性的设置。
2.1图表名称
      通过图表的名称属性我们可以设置图形的名称、子名称、X、Y轴的名称。
示例或说明
subcaption
rotateYAxisName
Y轴名称是否旋转的显示
rotateNames
X轴名称是否旋转的显示
slantLabels=’1’时，斜45度，否则斜90度竖排
2.2字体属性
示例或说明
outCnvbaseFont
Canvas外面的字体
即标题、子标题、X/Y轴名称字体
outCnvbaseFontSize
Canvas外面的字体大小
范围在0-72
outCnvbaseFontColor
Canvas外面的字体颜色
Canvas里面的字体
baseFontSize
Canvas里面的字体大小
baseFontColor
Canvas里面的字体颜色
2.3数据轴属性
示例或说明
showLabels
是否显示X轴标签名称
showYAxisValues
是否显示Y轴标签名称
numberPrefix
Y轴数据加上前缀
如numberPrefix = ‘a’
numberSuffix
Y轴数据加上后缀
如numberPrefix = ‘b’
formatNumberScale
是否格式化数字,默认为1(True),自动的给你的数字加上K（千）或M（百万）；若取0,则不加K或M
formatNumberScale=’0’即可去除掉这个’k’
labelDisplay
标签显示格式
WRAP（重叠）ROTATE（旋转）Stagger（交错）
slantLabels
标签旋转显示时的倾斜角度
staggerLines
标签交错显示时的交错行数
横轴标签隔几个显示
yAxisValuesStep
纵轴标签隔几个显示
yAxisMinValue
Y轴坐标的最小值
yAxisMaxValue
Y轴坐标的最大值
xAxisMinValue
X轴坐标的最小值
xAxisMaxValue
X轴坐标的最大值
2.4图例相关属性
示例或说明
showLegend
是否显示图例说明
legendPosition
设置图例说明的位置
legendBgColor
设置图例说明的背景颜色
legendBgAlpha
设置图例说明的背景透明度
legendBorderColor
设置图例说明的边框颜色
legendBorderThickness
设置图例说明的边框粗细
legendBorderAlpha
设置图例说明的边框透明度
legendShadow
是否显示为图例说明显示阴影
legendScrollBgColor
设置图例说明滚动条的背景颜色
当图例说明中有很多事件时
legendScrollBarColor
设置图例说明滚动条的颜色
当图例说明中有很多事件时
egendScrollBtnColor
设置图例说明滚动条的按钮的颜色
当图例说明中有很多事件时
2.53D图表属性
示例或说明
以二维的形式显示
3D图表已有的方法接口
以三维的形式显示
3D图表已有的方法接口
resetView()
重置，恢复到原先的角度
3D图表已有的方法接口
rotateView(x,y)
旋转到所选的角度
3D图表已有的方法接口
getViewAngles()
获得当前图表所处的横纵角度
var a=getViewAngles();
alert(a.xAng); alert(a.yAng);
cameraAngX
设置图表角度（横轴角度）
0 to 360/0 to -360默认为30度
cameraAngY
设置图表角度（纵轴角度）
0 to 360/0 to -360默认为-45度
设置图表开始的角度（横轴角度）
0 to 360/0 to -360
设置图表结束的角度（横轴角度）
0 to 360/0 to -360
设置图表开始的角度（纵轴角度）
0 to 360/0 to -360
设置图表结束的角度（纵轴角度）
0 to 360/0 to -360
dynamicShading
是否设置光源影响
设置光源的角度（横轴角度）
0 to 360/0 to -360
设置光源的角度（纵轴角度）
0 to 360/0 to -360
YZWallDepth
设置yz面的深度
ZXWallDepth
设置zx面的深度
XYWallDepth
设置xy面的深度
图表是否嵌入显示
默认前后重叠显示
三、刻度线
      在刻度线标签中我们可以设置零平面、刻度线和趋势线。
示例或说明
zeroPlaneColor
设置零线（面）的颜色
zeroPlaneThickness
设置零线（面）的粗细
zeroPlaneAlpha
设置零线（面）的透明度
zeroPlaneShowBorder
是否显示零面的外框
只针对3D图表
zeroPlaneBorderColor
设置零面外框的颜色
只针对3D图表
示例或说明
divLineColor
设置div的颜色
divLineThickness
设置div的线条粗细
divLineAlpha
设置div的线条透明度
divLineIsDashed
设置div是否虚线显示
showAlternateHGridColor
设置div块是否高亮显示
vDivLineColor
设置垂直div的颜色
vDivLineThickness
设置垂直div的线条粗细
vDivLineAlpha
设置垂直div的线条透明度
vDivLineIsDashed
设置垂直div是否虚线显示
showAlternateVGridColor
设置垂直div块是否高亮显示
alternateVGridAlpha (透明度)
     上面图像将零平面颜色设置为绿色、刻度线颜色为白色、粗细为1、虚线显示(如果虚线实现，粗细最好&=2否则就不清晰)。
示例或说明
是否虚线显示
默认实线显示
设置虚线长度
设置虚线间隙宽度
startValue
单个时一条横线，有结束值时，两点连线
displayvalue
valueOnRight
设置displayvalue显示右边
valueOnRight ='1'
设置线颜色
四、提示信息
      当我们将鼠标放在某快数据区域的时候，提示信息就会显示相应的提示内容，包括数据、所属“单位”、以及一些用户设置的信息。通过如下几个属性我们定制自己的提示信息。
     
示例或说明
showToolTip
鼠标放上去是否显示提示
Set属性里可自定义设置toolText
自定义提示框显示的内容
toolTipBorderColor
提示框边框的颜色
toolTipBgColor
提示框背景颜色
五、数据格式
设置小数点后面保留的位数
forceDecimals
是否强制保留小数点后面的decimals设置的位数
formatNumberScale
是否按默认的数据格式显示
decimalSeparator
小数点的分隔表示方式
thousandSeparator
千分位的分隔表示方式
numberScaleValue
两个联合一起使用，定义数据标度
numberScaleValue='00'
numberScaleUnit
numberScaleUnit='K,M,B'
numberPrefix
数字显示的前缀
numberPrefix='$'
numberSuffix
数字显示的后缀
阅读(...) 评论()浮华过后的宁静
FusionCharts 参数设置
FusionCharts 参数设置
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编码）
sNumberPrefix 次Y轴的数字前缀
sNumberSuffix 次Y轴的数字后缀
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", "
第一个参数是SWF 文件的地址。
第二个是图形的id。这个id 你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有
多个图形的时候，这个id 一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
2. myChart.setDataURL("Data.xml");
最后，我们把图形渲染在指定的地方。
3. myChart.render("chartdiv");
"chartdiv"就是前面的DIV 的id，这就表示把图形render 到"chartdiv"。
现在你运行JSChart.html，你会看到同Chart.html 一样的效果。很显然使用JavaScript 加载
图形，更方便，更直观。
clickURL=‘abc.jsp‘ 点击整个图表时跳转到abc.jsp
如果使用中文字符需加属性：rotateYAxisName=‘1’
useRoundEdges=‘1’ 光线效果
鼠标旋停参数
* showhovercap=”1/0″ : 显示是否激活鼠标旋停效果
hoverCapBgColor=”HexColorCode” : 设置鼠标旋停效果的背景颜色
hoverCapBorderColor=”HexColorCode” : 设置鼠标旋停效果的边框颜色
* hoverCapSepChar=”Char” :
设置鼠标旋停后显示的文本中的分隔符号
图表边距的设置
* chartLeftMargin=”Numerical Value (in pixels)”
: 设置图表左边距
* chartRightMargin=”Numerical Value (in pixels)” : 设置图表右边距
chartTopMargin=”Numerical Value (in pixels)” : 设置图表上边距
chartBottomMargin=”Numerical Value (in pixels)” : 设置图表下边距
&set& 所具有的属性
* name=”string” : 设置在图表中体现出来的名字
Example: &set
name=’Jan’ …&
* value=”NumericalValue” : 设置在图表中各个名字想对应的值
&set name=’Jan’ value=’12345′ …&
* color=”HexCode” :
设置在图表中相对应的柱行图的颜色
Example: &set name=’Jan’ value=’12345′ color=’636363′
* hoverText=”String value” : 设置鼠标旋停在相对应的柱行图 上出现的文本内容
&set name=’Jan’ value=’12345′ color=’636363′ hoverText=’January’…&
link=”URL” : 设置该柱行图的链接地址（需要URL Encode重编码）
Example: &set …
link=’ShowDetails.asp%3FMonth=Jan’ …&
* alpha=”Numerical Value 0-100″ :
设置在图表中相对应的柱行图的透明度
Example: &set … alpha=’100′ …&
* showName=”1″ :
设置在是否显示图表中相对应的柱行图的name
Example : &set … showName=”1″ …&
，只需要做这些：
数据文档中定义自己的样式属性。
将你定义好的样式与定义好的图表对象联系起来。
&!-- Your data here --&
&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&
正如上面你看到的，所有与样式相关的元素的属性都出现在父元素
下。它可以有效的包含你的所有的与样式相关的
不会识别任何定义在父元素
之外的样式定义。
元素的子元素是
元素。就像名字所暗示的，
元素包含你为图表自定义的样式，而在
元素下，你可以将你自定义的样式应用到不同的图表对象。
每一个样式必须使用
元素定义。多个样式元素可以逐个放置在
元素下。因此，如果你打算定义五个自定义样式，你需要创建五个
根据你要定义的样式类型，每个
元素会有各种各样的属性。在上面的例子中，每一个
元素都有自己的属性集。不过，下面的两个属性通用的：
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！posts - 60,&
comments - 4,&
trackbacks - 0
&由于项目需求需要做一个报表，选择FusionCharts作为工具使用。由于以 前没有接触过报表，网上也没有比较详细的fusionCharts教程，所以决定好好研究FusionCharts，同时做一个比较简单的教程提供参考。 由于能力有限(应届毕业生的菜鸟而已)，所以教程(学习笔记而已)不免会有错误，望别喷，望指正。当然肯定避免不了会参考其他资料的。
& & & & 1．1、简介
& & & &FusionCharts是InfoSoft Global公司的一个产品,而FusionCharts Free则是FusionCharts提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。这里介绍了都是基于FusionCharts Free的。
& & & &FusionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP、.NET, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。我们不需要知道任何Flash的知识，只需要了解你所用的编程语言而已。
& & & &FusionCharts功能强大，那么它到底能够做什么呢？下面一一展示。
& & & &3D/2D 柱形图
& & & &曲线图
& & & &3D/2D饼图、环图
& & & &区域图
& & & &堆栈图
& & & &联合图
& & & &上面只是一些功能的展示，FusionCharts还能够做更多的事情，这里就不一一介绍了。下面介绍如何安装使用FusionCharts。
& & & &1.2 文档结构
& & & &将下载的FusionCharts解压到任意目录，得到的解压文件夹里面会包含类似于此的文档结构。
& & & & &&Charts ：里面包含着所有的SWF文件，如果你的Web项目需要创建图像，则导入相应的SWF文件即可。
& & & & &&Code ：里面包含了所有的示例代码。
& & & & &&Contents ：包含了文档，也就是API，包含了FusionCharts的使用方法。
& & & & &&Gallery ：包含了一些图像的创建例子。
& & & & &&JSClass：FusionCharts javascript文件就放在这个目录下，这些文件能够帮组我们以一种友好的方式将图像插入到页面中。
& & & &1.3安装使用
& & & &在了解了FusionCharts的文档结构后，下面来讲解如何将FusionCharts应用到应用程序中。其实FusionCharts的使用方法非常简单。只需要三个步骤就可以搞定。
& & & &1、 导入你要创建图像相对应的SWF文件。
& & & &2、 编写XML数据文件。
& & & &3、 编写HTML文件，这个文件要包含显示图像的相应代码。
& & & &介绍了这么久，终于可以创建第一个图像了。我将以一种比较简单的方式来创建一个3D柱状的图形，用来显示每个月某件商品的销售情况。
& & & &2.1、创建工程
& & & &新建文件夹，命名为FusionCharts，然后在新建两个文件夹分别命名为FusionCharts、datas。这两个文件分别用于存放SWF文件和xml数据文件。
& & & &2.2、导入文件
& & & &将相应的3D柱状图像的SWF：Column3D.swf复制到FusionCharts文件夹中。
& & & &2.3、创建XML数据文件
& & 创建XML文件：Data1.xml，并将其放入到datas文件夹中。文件内容如下：
& & & &对于这个XML文件这里简单介绍一下。
& & & &&chart&元素作为root元素，他有一些基本属性，如：设置x、y轴名称，报表标题、数值格式。在&chart&元素中有很多的&set&元素，这个元素用来描述设定的数据，label表示名称、value表示值。
& & & &2.4、编写HTML文件代码
&&&&&&&&&&
&&&&&&&&&&
&&&&&&&&&&&&&
&&&&&&&&&&&&&
&&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&&&
& & & &生成的图像：
阅读(...) 评论()fusioncharts设置在图表上显示数值的时候，达到18个才显示出来，用的是msco_百度知道
fusioncharts设置在图表上显示数值的时候，达到18个才显示出来，用的是msco
fusioncharts设置在图表上显示数值的时候，达到18个才显示出来，用的是mscolumn2d直筒类型的图表，请大神赐教
我有更好的答案
当按下压缩式制冷饮水机制冷开关，制冷绿色指示灯亮，压缩机启动运行，将蒸发器中已吸热气化的制冷剂蒸汽吸回，并随之压缩成高温、高压气体，送至冷凝器，经冷凝器向外界空气中散热冷凝成高压液体，再经毛细管节流降压流入蒸发器内，吸收冷胆热量而使水温下降，然后被压缩机吸回。如此循环，达到降温的目的。当水温随时间降到设定温度时，制冷温控器触点断开，制冷绿色指示灯熄灭，压缩机停转，转入保温工况。断电后水温逐渐回升，当升到设定温度时，制冷温控器触点动作闭合，接通电源绿色指示灯亮，压缩机运行。如此循环，将水温控制在4-12℃之间。
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。