`

fusionchart整理

阅读更多
<chart caption='各地市对比图' xAxisName='' yAxisName='' outCnvBaseFontColor='#000000' showValues='0' decimals='3' formatNumberScale='0' baseFontSize='13' bgAlpha='40' bgColor='#F3EED1' legendPadding='0' slantLabels='1' showLabels='1' chartLeftMargin='1' chartRightMargin='1' chartTopMargin='1' chartBottomMargin='1' canvasBgColor='#F9F9F9' canvasBaseColor='#F9F9F9' canvasBaseDepth='3' showCanvasBg='1' showCanvasBase='1'><set lable='...' value='...'/><set lable='...' value='...'/><set lable='...' value='...'/><set lable='...' value='...'/> </chart>

FusionCharts 的 XML标签属性有一下四种数据类型
* Boolean - 布尔类型,只能为1或者0。例如:<graph showNames=’1′ >
* Number - 数字类型,只能为数字。例如:<graph yAxisMaxValue=’200′ >
* String - 字符串类型,只能为字符串。例如: <graph caption=’My Chart’ >
* Hex Color Code - 十六进制颜色代码,前边没有’#’.例如: <graph bgColor=’FFFFDD’ >

XML中的标签和属性有:
<graph> 所具有的属性
flash背景参数:
* bgColor=”HexColorCode” : 设置flash的背景颜色
* bgAlpha=”NumericalValue(0-100)” : 设置背景的透明度
* bgSWF=”Path of SWF File” : 设置一个外部的Flash 为flash的背景
图表背景参数:
* canvasBgColor=”HexColorCode” : 设置图表背景的颜色
* canvasBaseColor=”HexColorCode” : 设置图表基部的颜色
* canvasBaseDepth=”Numerical Value” : 设置图表基部的高度
* canvasBgDepth=”Numerical Value” : 设置图表背景的深度
* showCanvasBg=”1/0″ : 设置是否显示图表背景
* showCanvasBase=”1/0″ : 设置是否显示图表基部
图表和轴的标题
* caption=”String” : 图表上方的标题
* subCaption=”String” : 图表上方的副标题
* xAxisName= “String” : X轴的名字
* yAxisName= “String” : y轴的名字
图表数量值的限制
* yAxisMinValue=”value”: y轴最小值
* yAxisMaxValue=”value”: y舟最大值
通用参数
* shownames=”1/0″ : 设置是否在x轴下显示<set>里指定的name
* showValues=”1/0″ : 设置是否在柱型图或饼型图上显示数据的值
* showLimits=”1/0″ : 设置是否在图表的y轴坐标上显示最大最小的数据值
* rotateNames=”1/0″ : 设置x轴下的name 是水平显示还是垂直显示
* animation=”1/0″ : 设置柱型图的显示是否是动画显示
字体属性
* baseFont=”FontName” : 设置字体样式
* baseFontSize=”FontSize” : 设置字体大小
* baseFontColor=”HexColorCode” : 设置字体颜色
* outCnvBaseFont = “FontName” : 设置图表外侧的字体样式
* outCnvBaseFontSze=”FontSize” : 设置图表外侧的字体大小
* outCnvBaseFontColor=”HexColorCode”: 设置图表外侧的字体颜色
数字格式选项
* numberPrefix=”$” : 设置数据值的前缀
* numberSuffix=”p.a” : 设置数据值的后缀(如果是特殊字符,需要使用URL Encode重编码)
* formatNumber=”1/0″ : 设置是否格式化数据
* formatNumberScale=”1/0″ : 设置是否用“K”来代表千,“M”来代表百万
* decimalSeparator=”.” : 用指定的字符来代替小数点
* thousandSeparator=”,” : 用指定的字符来代替千位分隔符
* decimalPrecision=”2″ : 设置十进制的精度
* divLineDecimalPrecision=”2″: 设置y轴数值的小数位数
* limitsDecimalPrecision=”2″ : 设置y轴的最大最小值的小数位数
水平分隔线
* numdivlines=”NumericalValue” : 设置水平分隔线的数量
* divlinecolor=”HexColorCode” : 设置水平分隔线的颜色
* divLineThickness=”NumericalValue” : 设置水平分隔线的宽度
* divLineAlpha=”NumericalValue0-100″ : 设置水平分隔线的透明度
* showDivLineValue=”1/0″ : 设置是否显示水平分隔线的数值
鼠标旋停参数
* 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)” : 设置图表下边距
Zero Plane
The zero plane is a 3D plane that signifies the 0 position on the chart. If there are no negative numbers on the chart, you won’t see a visible zero plane.
* zeroPlaneShowBorder=”1/0″ : Whether the border of a 3D zero plane would be plotted or not.
* zeroPlaneBorderColor=”Hex Code” : If the border is to be plotted, this attribute sets the border color for the plane.
* zeroPlaneColor=”Hex Code” : The intended color for the zero plane.
* zeroPlaneAlpha=”Numerical Value 0-100″ : The intended transparency for the zero plane.

<set> 所具有的属性
* name=”string” : 设置在图表中体现出来的名字
Example: <set name=’Jan’ …>
* value=”NumericalValue” : 设置在图表中各个名字想对应的值
Example: <set name=’Jan’ value=’12345′ …>
* color=”HexCode” : 设置在图表中相对应的柱行图的颜色
Example: <set name=’Jan’ value=’12345′ color=’636363′ …>
* hoverText=”String value” : 设置鼠标旋停在相对应的柱行图 上出现的文本内容
Example: <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″ …>

////////////////////////////////////////////////////////////////////////////////////////////

ANCHORS 锚点 用于标识line或area的数值点
支持效果 Animation 动画、Shadow 阴影、Glow 发光、Bevel 倾斜、Blur 模糊
动画属性 _alpha、_x、_y、_xScale、_yScale
BACKGROUND 整个图表的背景
支持属性 Animation、Shadow、Glow、Bevel、Blur
动画属性 _alpha、_x、_y、_xScale、_yScale
CANVAS 区域图中的区域
支持属性 Animation、Shadow、Glow、Bevel、Blur
动画属性 _alpha、_x、_y、_xScale、_yScale
CAPTION 图表标题
SUBCAPTION 图表子标题
支持属性 Animation、Shadow、Glow、Bevel、Blur、Font 字体
动画属性 _alpha、_x、_y
DATALABELS 数据的x轴标签列表
支持属性 Animation、Shadow、Glow、Bevel、Blur、Font 字体
动画属性 _alpha、_x、_y
DATAPLOT 数据细节(如:2D图表中的列)
支持属性 Animation、Shadow、Glow、Bevel、Blur
动画属性 _alpha、_x、_y、_xScale、_yScale
DATAVALUES 图表数据
支持属性 Animation、Shadow、Glow、Bevel、Blur、Font 字体
动画属性 _alpha、_x、_y
DIVLINES 水平的列表区域(由div组成的线)
支持属性 Animation、Shadow、Glow、Bevel、Blur
动画属性 _alpha、_x、_y、_xScale
HGRID 水平的两个列表区域中交替的颜色
支持属性 Animation、Shadow、Glow、Bevel、Blur
动画属性 _alpha、_x、_y、_xScale、_yScale
VDIVLINES 垂直的列表区域
VGRID 垂直的两个列表区域中交替的颜色
VLINES 垂直分割线
XAXISNAME x轴名称
YAXISNAME y轴名称
YAXISVALUES y轴的值列表


TOOLTIP 在鼠标移动到数据点上的时候的提示
支持属性 Font
TRENDLINES 趋势线
TRENDVALUES
chart
Functional Attributes
animation bool 是否使用动画
palette number(1-5) 使用默认的调色板
connectNullData bool 是否呈现空值(?猜测)
showLabels bool 是否显示标签
labelDisplay string (WRAP,STAGGER,ROTATE or NONE ) 标签的呈现方式(超长屏蔽、折行、倾斜还是不显示)
rotateLabels bool
slantLabels bool
labelStep number (1 or above)
staggerLines number (2 or above) 多少个字符后折行(labelDisplay=stagger)
showValues bool 是否一直显示数据值在数据点上
rotateValues bool 是否滚动显示值 (showValues=1)
showYAxisValues bool 是否显示y轴数据
showLimits bool
showDivLineValues bool
yAxisValuesStep number (1 or above) y轴标记的显示间隔
adjustDiv bool 自动调整divlines
rotateYAxisName bool
yAxisNameWidth number (In Pixels)
clickURL String 图表的焦点链接地址
defaultAnimation bool 是否开启默认动画
yAxisMinValue number Y轴中最小值
yAxisMaxValue number Y轴中最大值
setAdaptiveYMin
Chart Titles and Axis Names
caption
subCaption
xAxisName
yAxisName
Chart Cosmetics
bgColor color 可以使用逗号分割多个颜色值 FF5904,FFFFFF
bgAlpha number (0-100) 透明度
bgRatio number (0-100) 多个颜色值所占的比率
bgAngle number (0-360) 角度
bgSWF string 背景flash,但必须在同一个域下
bgSWFAlpha number (0-100)
canvasBgColor Color 区域背景颜色
canvasBgAlpha
canvasBgRatio
canvasBgAngle
canvasBorderColor
canvasBorderThickness number (0-5) 边框厚度
canvasBorderAlpha
showBorder bool
borderColor
borderThickness number In Pixels
borderAlpha
Data Plot Cosmetics
showPlotBorder bool
plotBorderColor
plotBorderThickness (0-5)pixels
plotBorderAlpha
plotBorderDashed bool 是否使用虚线
plotBorderDashLen number in pixels
plotBorderDashGap number in pixels
plotFillAngle number 0-360
plotFillRatio number 0-100
plotFillAlpha
plotGradientColor color 渐变颜色
showShadow bool 是否显示阴影
plotFillColor
Anchors
drawAnchors bool
anchorSides Number 3-20 边数
anchorRadius number in pixels 半径
anchorBorderColor color hex code
anchorBorderThickness number in pixels
anchorBgColor
anchorAlpha
anchorBgAlpha
Divisional Lines & Grids
numDivLines number >0 水平区域线数量
divLineColor
divLineThickness number 1-5
divLineAlpha
divLineIsDashed bool 虚线
divLineDashLen
divLineDashGap
zeroPlaneColor
zeroPlaneThickness
zeroPlaneAlpha
showAlternateHGridColor
alternateHGridColor
alternateHGridAlpha
numVDivLines
vDivLineColor
vDivLineThickness
vDivLineAlpha
vDivLineIsDashed
vDivLineDashLen
vDivLineDashGap
showAlternateVGridColor
alternateVGridColor
alternateVGridAlpha
Number Formatting
formatNumber bool
formatNumberScale bool
defaultNumberScale string
numberScaleUnit string
numberScaleValue string
numberPrefix string
numberSuffix string
decimalSeparator string
thousandSeparator string
inDecimalSeparator string
inThousandSeparator string
decimals number 0-10
forceDecimals bool
yAxisValueDecimals number 0-10
Font Properties
baseFont
baseFontSize number 0-72
baseFontColor
outCnvBaseFont cnv canvas
outCnvBaseFontSize
outCnvBaseFontColor
Tool-tip
showToolTip bool
toolTipBgColor
toolTipBorderColor
toolTipSepChar
Chart Padding & Margins
captionPadding
xAxisNamePadding
yAxisNamePadding
yAxisValuesPadding
labelPadding
valuePadding
chartLeftMargin
chartRightMargin
chartTopMargin
chartBottomMargin
canvasPadding
set element
label string
value number
color color hex code
link string
toolText string
showLavel
showValue
dashed
alpha
anchorSides
anchorRadius
anchorBorderColor
anchorBorderThickness
anchorBgColor
anchorAlpha
anchorBgAlpha
Vertical data separator lines
   <set label=’Dec 2005′ value=’36556′ />
   <vLine color=’FF5904′ thickness=’2′ />
   <set label=’Jan 2006′ value=’45456′ />
color
thickness
alpha
dashed
dashLen
dashGap
Trend-lines
   <trendLines>
   <line startValue=’895′ color=’FF0000′ displayvalue=’Average’ />
   </trendLines>
startValue
endValue
displayValue
color
isTrendZone
showOnTop
thickness
alpha
dashed
dashLen
使用方法:

第一步:把要用的swf文件放到web下的某个地方
第二步:在后台的java文件中准备数据,例如:
// 只有维度属于地域时才生成xml文件,展现图
if (pub.convertNullToEmpty(map.get("DIM_CLASS_COMMENTS")).equals("地域")) {
// 方式一:FusionCharts方式
StringBuilder sb = new StringBuilder();
sb.append("<chart caption='"+pub.convertNullToEmpty(map.get("KPI_DESC"))+"各地市对比图' xAxisName='' yAxisName='' outCnvBaseFontColor='#000000' showValues='0' decimals='3' formatNumberScale='0' baseFontSize='13' bgAlpha='40' bgColor='#F3EED1' legendPadding='0' slantLabels='1' showLabels='1' chartLeftMargin='1' chartRightMargin='1' chartTopMargin='1' chartBottomMargin='1' canvasBgColor='#F9F9F9' canvasBaseColor='#F9F9F9' canvasBaseDepth='3' showCanvasBg='1' showCanvasBase='1'>");
for (int j = 0; j < kpiDimAnalyseDataList.size(); j++) {
   map = (Map)kpiDimAnalyseDataList.get(j);
   sb.append("<set label='"+pub.convertNullToEmpty(map.get("CHART_X"))+"' value='"+pub.convertNullToEmpty(map.get("CHART_Y")).replaceAll(",", "")+"' />");
}
sb.append("</chart>");
request.setAttribute("diyutu", sb);
}
第三步:在jsp中引用js,例如:
<tr id="diyuTuId" style="<%=displayStyle%>">
<td id="diyuTuTdId" align="center">
   <script type="text/javascript">
     var chart = new FusionCharts("../../../resources/flashview/Column3D.swf", "ChartId", "450", "200", "0", "0");
     var di = "<%=request.getAttribute("diyutu")%>";
     chart.setDataXML(di);
     chart.render("diyuTuTdId"); // diyuTuTdId必须和td中的id名一样
   </script>
</td>
</tr>

分享到:
评论

相关推荐

    fusionchart的java简单封装

    fusionchart的java简单封装fusionchart的java简单封装fusionchart的java简单封装fusionchart的java简单封装fusionchart的java简单封装fusionchart的java简单封装

    FusionChart FusionChart.js

    FusionChart FusionChart.js

    FusionChart和FusionWidgets破解版

    FusionChart和FusionWidgets破解版,目前世界上最好的图表展示软件。

    fusionchart实例

    在这个“FusionChart实例”压缩包中,很可能是包含了一系列使用FusionCharts的实际示例代码,用于帮助学习者更好地理解和应用FusionCharts。 首先,我们要了解FusionCharts的基本概念。FusionCharts是一个基于...

    fusionchart破解版(完整实用)

    完整的fusionchart开发资源、文档,公司项目使用的。

    FusionChart

    标题"FusionChart"指的是一个流行的JavaScript图表库,用于在网页上创建交互式、美观的数据可视化效果。这个库广泛应用于各种数据分析、报告和仪表板场景,让数据以图形化的方式直观呈现,便于理解和解读。 ...

    fusionchart支持仪表盘

    首先,"fusionchart支持仪表盘"意味着FusionCharts具备生成仪表盘的能力。仪表盘是一种信息展示工具,它将多个关键性能指标(KPIs)集中在一个统一的视图中,便于用户快速理解业务状况。FusionCharts通过其丰富的...

    fusionchart for flex 4 破解

    提供了一个3D柱状图Column3D的破解,已测试通过

    fusionchart实现服务端的下载

    在IT行业中,FusionCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型和高度自定义的选项,用于在网页上创建互动式、美观的数据可视化效果。本文将深入探讨如何实现FusionCharts服务端的图片下载,这是一...

    fusionchart报表demo

    在这个“FusionChart报表demo”中,我们可以深入探讨如何利用FusionCharts来创建互动式、吸引人的报表。 一、FusionCharts概述 FusionCharts是一款基于JavaScript的图表库,支持超过90种不同类型的图表,包括柱状图...

    FusionChart学习及简单实例1

    FusionCharts是一款强大的数据可视化工具,它通过JavaScript库来创建交互式的图表,广泛应用于Web应用程序中,以生动、直观的方式展示复杂数据。本教程将基于"FusionCharts学习及简单实例1"这一主题,深入探讨...

    fusionchart的简单封装

    标题“fusionchart的简单封装”涉及的是一个关于使用FusionCharts JavaScript库进行数据可视化的过程。FusionCharts是一款功能丰富的图表库,它提供了多种图表类型,如柱状图、饼图、线图等,用于创建交互式的、动画...

    FusionChart甘特图控件

    **FusionChart甘特图控件详解** FusionChart是一款强大的图表库,它以其美观的图形和丰富的功能在IT行业中广泛应用。在这个特定的场景中,我们关注的是FusionChart用于展示项目进度管理的甘特图控件。甘特图是一种...

    fusionchart

    fusionchart开发常用的属性总结,包括仪表盘的属性,柱状图属性,折线图属性

    fusionChart中文文档

    在"fusionChart中文文档"中,你将找到关于FusionCharts的各种教程、指南和API参考。这些文档通常会涵盖以下关键知识点: 1. **安装与设置**:介绍如何在你的项目中引入FusionCharts库,包括下载、引入JavaScript...

    FusionChart_API+3.2破解版文件+一个eclipse_FusionChartDemo+pdf使用教程

    FusionChart_API +3.2破解版文件 +一个eclipse_FusionChartDemo +pdf使用教程 我把fusionchart常用的所有资源都打包放在这里了,需要的抱走吧。肯定有用的。

    Fusionchart.js

    "Fusionchart.js"是FusionCharts的核心JavaScript库文件,它包含了大量的代码来处理图表的渲染、动画效果以及与用户的交互功能。这个压缩包很可能是FusionCharts的基础组件集合,用于快速构建具有视觉吸引力的数据...

    基于xml的图表控件FusionChart V3

    **基于XML的图表控件FusionChart V3详解** FusionChart V3是一款强大的图表生成工具,它利用XML数据格式和JavaScript技术,为Web应用程序提供交互式和视觉吸引力丰富的图表解决方案。这款控件广泛应用于数据分析、...

    extjs中使用FusionChart举例

    extjs中使用FusionChart举例

Global site tag (gtag.js) - Google Analytics