FusionCharts简明指南.docx

一、制作第一个FusionCharts首先跟着官方文档制作第一个图表。具体实现比较简单，不高兴看英文可以看文档下方房产项目的代码，字符串组装数据的，仅供参考。官方文档：/charts/contents/FirstChart/FirstChart.html /charts/FusionCharts使用比较简单，只需3步：前台加载JS后台用字符串的方式组装数据前台JS加载后台组装的数据给予展现1. 前台加载JSscript language=JavaScriptsrc=/charts/Charts/FusionCharts.js type=text/javascript2. 后台用字符串的方式组装数据在controller文件里定义一个字符串，将xml文件组合成字符串String str = ;str+= ;str+= ;str+= ;str+= ;str+= ;中的属性不做解释，下文中将会讲到如何快捷的查看。另外，组装数据还可以直接使用xml。3.前台JS加载后台组装的数据给予展现var myChart ;$(document).ready(function()myChart = new FusionCharts(charts/Charts/Pie2D.swf, chartDY01, 396, 227, 0, 1);/设置图的样式、id，长、高等。1和showExportDataMenuItem=1一起用页面能导出数据myChart.setTransparent(true);/ flash透明，不需要的可以缺省。$.ajax(/后台取数据 type: Get, url: data: null, success: function (data) myChart.setXMLData(data.str);/字符串形式组装的xml myChart.render(chartdistribution);/图表位置htmlid，比如：divID );二、快速开发进入本地文档中的gallery页面，先选要开发的图表。FusionCharts_EvaluationGalleryindex.html比如要做首页的柱状图：l 点击就能看到该图形的xml文档。上面会有图形主要属性，和数据格式。如果你是用字符串的方式组装数据的话，把xml组装成字符串（见上文2. 后台用组装数据）。l 前台加载JS 和后台组装的数据，简单的demo就完成了。剩下的就是对chart属性的修改。三、常用属性chart的属性很多，需要查阅官方文档。官方文档:/charts/看文档的话主要看这三类： 上面2个单Y轴图形，下面是双Y轴图形。具体要自己看属性。这里就介绍下常用的一些属性，网上摘录的，做了些修改。fusionCharts 主要属性：按照模块分类：1、边框及整个背景的属性：属性名称属性说明实例bgColor背景颜色bgColor=999999,FFFFF 渐变 bgColor=999999 单色bgAlpha背景透明度设置范围在 1-100showBorder图表外是否显示边框默认二维图表显示，三维不显示borderColor边框颜色十六进制表示去掉前面的#号borderThickness边框线的粗细像素表示borderAlpha边框透明度bgSWF背景图片或动画保证此图片和 SWF 文件在同一个文件夹bgSWFAlpha设置背景图片的透明度2、图表背景属性：属性名称属性说明示例或说明canvasbgColor图表背景颜色可设置单色也可以使用梯度设置渐变色canvasbgAlpha图表背景透明度canvasBorderColor图表背景边框颜色canvasBorderThickness图表背景边框线粗细canvasBorderAlpha图表背景边框透明度3、图表名称和轴属性：属性名称属性说明示例或说明caption标题subcaption子标题xAxisNameX 轴名称yAxisNameY 轴名称rotateYAxisNameY 轴名称是否旋转的显示outCnvbaseFontCanvas 外面的字体即标题、子标题、X/Y 轴名称字体outCnvbaseFontSizeCanvas 外面的字体大小范围在 0-72outCnvbaseFontColorCanvas 外面的字体颜色baseFontCanvas 里面的字体baseFontSizeCanvas 里面的字体大小baseFontColorCanvas 里面的字体颜色4、data plot 属性plotGradientColor取消梯度颜色plotGradientColor=指明渐变是明度还是灰度（默认为明度，即加白色渐变）plotGradientColor=333333showPlotBorder是否显示数据块的边框柱状图是否显示外框plotBorderDashed数据块的边框是否虚线显示useRoundEdges对于柱状图是否使用圆角并且加入了 glass 效果plotFillAngle使用梯度颜色时，选择梯度角度plotFillAlpha使用梯度颜色时，选择透明度5、数据横纵轴属性showLabels是否显示 X 轴标签名称默认显示showYAxisValues是否显示 Y 轴标签名称默认显示labelDisplay标签显示格式WRAP（重叠）ROTATE（旋转）Stagger（交错）slantLabels标签旋转显示时的倾斜角度staggerLines标签交错显示时的交错行数labelStep横轴标签隔几个显示yAxisValuesStep纵轴标签隔几个显示6、图表上的数据显示showValues是否显示图表上的数据默认显示displayValue自定义图表上显示的内容rotateValues是否旋转 90 度显示图表上的数据placeValuesInside是否在图表内部显示数据useRoundEdges=0 显示平面效果7、横轴坐标最大值、最小值属性yAxisMinValueY 轴坐标的最小值yAxisMaxValueY 轴坐标的最大值xAxisMinValueX 轴坐标的最小值xAxisMaxValueX 轴坐标的最大值8、图表内部的 div 线相关属性divLineColor设置 div 的颜色divLineThickness设置 div 的线条粗细1-5divLineAlpha设置 div 的线条透明度1-100divLineIsDashed设置 div 是否虚线显示showAlternateHGridColor设置 div 块是否高亮显示9、tool-tip 属性（提示框）showToolTip鼠标放上去是否显示提示Set 属性里可自定义设置 toolTexttoolText自定义提示框显示的内容toolTipBorderColor提示框边框的颜色toolTipBgColor提示框背景颜色10、padding 属性chartLeftMargin纵轴标题离外边框的距离chartRightMarginCanvas 右边线离外边框的距离chartTopMargin标题离外边框的距离chartBottomMargin横轴标题离外边框的距离captionPaddingCanvas 上边线离图表标题的距离xAxisNamePadding横坐标离横轴标题的距离yAxisNamePadding纵坐标离纵轴标题的距离yAxisValuesPaddingCanvas 左边线离纵坐标标签的距离labelPaddingCanvas 下边线横坐标标签的距离valuePadding图表上面的数据里图表的距离canvasPaddingCanvas 左边线离第一个 Anchor 的距离只限于线图和块图11、数据格式相关属性decimals设置小数点后面保留的位数forceDecimals是否强制保留小数点后面的decimals 设置的位数formatNumberScale是否按默认的数据格式显示decimalSeparator小数点的分隔表示方式默认.thousandSeparator千分位的分隔表示方式默认,numberScaleValue两个联合一起使用，定义数据标度numberScaleValue=1000,1000,1000numberScaleUnitnumberScaleUnit=K,M,BnumberPrefix数字显示的前缀numberPrefix=$numberSuffix数字显示的后缀12、legend 相关属性showLegend是否显示图例说明默认显示legendPosition设置图例说明的位置legendBgColor设置图例说明的背景颜色legendBgAlpha设置图例说明的背景透明度legendBorderColor设置图例说明的边框颜色legendBorderThickness设置图例说明的边框粗细legendBorderAlpha设置图例说明的边框透明度legendShadow是否显示为图例说明显示阴影legendScrollBgColor设置图例说明滚动条的背景颜色当图例说明中有很多事件时legendScrollBarColor设置图例说明滚动条的颜色当图例说明中有很多事件时egendScrollBtnColor设置图例说明滚动条的按钮的颜色当图例说明中有很多事件时四、FAQ1、双Y轴右边轴属性设置双Y轴图形右侧Y轴的属性设置跟左边是一样的，唯一区别是在属性前或者中间加了S（second）。例如：snumberPrefix2、JS解析问题Fusioncharts有flash解析和JS解析，在JS解析时可能会碰到一些问题。1、数据不显示可能原因：中的属性用空格隔开。在flash下不隔开是不会出问题的，但JS不行。 2、图表位置偏移如图，一个页面里嵌入了两个iframe里面分别是自有房产页面和租入房产页面。在页面同时加载两个iframe中页面的时候，租入房产页面fusioncharts会发生位置偏移。解决方法是两个页面不要同时加载，为第二个iframe src动态绑定一个url。3、美观 对比下两个图：上图默认的边框会比较粗，个人觉得很丑。plot的外框也很粗，建议去掉。下图设置了bordercolor和plotBorder和工具自带的色彩。设置如下：canvasBorderColor=999999showplotBorder=0不设置plot颜色的话系统会默认渐变色