fusioncharts free 谁用过，谁封装过

Question

fusionchats free谁封装过，封装一个接口。不用每次都自己组织一大堆XML，求教封装方法

Answer 1

在上家公司的时候写过一套jsp tag来专门封装这些东西。总的思路就是通过配置安装如下模板生成代码
<xmp>
  xml code
</xmp>
<script>
    //根据配置选择swf文件
    //从xmp中读取xml code
    //调用chat初始化方法
</script>
总的来说封装起来还是比较简单的，但fushionchart的一些小bug非常烦人，比如如果你将输出chat的宽度
这只为100%那么就有可能出问题，尤其是在页面中chart比较多的时候

Answer 2

需要把一些参数的定义，还有组织XML这块封装成一个interface，以后每个页面调用的时候就会更加简单。
而不是自己组织一大堆XML。他的参数太多了具体怎么封装。还有单系列，多系列。这些怎么来区分比较好？

Answer 3

LZ的问题，我不是很明白，不过我使用过fusionCharts，而且我们公司也在它的基础上做了改动，但是我感觉对于报表，我们做的只是拼接数据串，不可能在继续封装了。不知道fusionchats free是不是和我用的是一个！

Answer 4

是同一个，封装的好处是，假如fusion升级，或者换个一个控件，不需要改页面文件，只要稍微修改下interface就好了。

Answer 5

fusionChart有很多种用法，楼主直接百度找教材即可，XML只是它的其中一种调用方式，可以是JS，也可以是任何后台语言组合，直接写个JS数组就能直接用它例子里给你的函数一句话调用fusionChart，这个我前年玩过，感觉还是比较简单的。本身fusionChart就是一个FLASH的封装，对外开放了接口而已！具体可以看那个80多页的fusionChart教材！教材写得简短实用！很不错的！

Answer 6

楼上的说的很全面，他组织XML部分比较麻烦，我想自己写个JS组织，各种图形又有单系列，多系列，pie图，bar图，line图。请问怎么包装合适，你有包装过么？

Answer 7

fusionchats free的xml定义可以考虑放在接口服务层实现，
外部的调用不用知道参数是为哪个控件服务的。

Answer 8

1. fusionchart 的xml文件 放在你的项目下，xml里把<chart  众多参数></chart>都写好，
2. 后台取到数据以后，通过读取该xml文件，添加<set>子元素
3. xml再转成字符串 发到前端就可以了对于单系列 多系列 什么图的，你需要添加对应的xml文件就可以了！

Answer 9

1。fusionchart 的xml文件 放在你的项目下，xml里把<chart 众多参数></chart>都写好，
fusioncharts没有xml文件啊

Answer 10

我把我封装的给你看下比较土var GetColorType=1;//1，是自己定义的仿照excel的颜色24种，0是随机颜色//随机取色函数
function randomColor() 
{
//16进制方式表示颜色0-F
var arrHex = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
var strHex = "#";
var index;
for(var i = 0; i < 6; i++) 
{//取得0-15之间的随机整数
index = Math.round(Math.random() * 15);
strHex += arrHex[index];
}
return strHex;
}
//仿照excel写死的24种颜色
function GetColor(n){
var arrSETColor=new Array("3C6495","903A38","748C41","5F4978","358196","BA7032","4473A7","4473A7","AA4544","89A54E","71588F","4198AF","DB843C","4F81BC","C0504E","9BBB57","8165A2","4AACC5","F89647","93A9D0","D09392","BACD96","A99BBE","92C2D6","FAB590");
return arrSETColor[n];
}/**
 * FunctionName: Charts
 * Describe:   图表控件的总函数
 * Author: lq
 * @param type 图形总类
 * divID 需要显示的div
 * divHeight div高度
 * divwidth    div宽度
 * DataParam   数据系列参数
 * AllParam    总参数
 * TrendlinesParam 趋势线参数
 *
 */
function Charts(type,divID,divHeight,divWidth,DataParam,AllParam,TrendlinesParam){
var strXML="<graph ";
strXML +=OParam(AllParam);
strXML +=" >";
strXML +=Chartdata(DataParam,AllParam);
if(TrendlinesParam){
strXML +=Trendlines(TrendlinesParam);
}
strXML +="</graph>";

FormGraphic(type,divID,divWidth,divHeight,strXML);
}
/**
 * FunctionName: OParam
 * Describe:   图表控件组织总体参数的函数
 * Author: lq
 * @param 每个参数的定义见api
 *
 */
function OParam(AllParam)
{
var strXML='';
if(AllParam.decimalPrecision)
{
strXML+=" decimalPrecision='"+AllParam.decimalPrecision+"'";
}
if(AllParam.baseFont)
{
strXML+=" baseFont='"+AllParam.baseFont+"'";
}
if(AllParam.baseFontSize)
{
strXML+=" baseFontSize='"+AllParam.baseFontSize+"'";
}
if(AllParam.showPercentageValues)
{
strXML+=" showPercentageValues='"+AllParam.showPercentageValues+"'";
}
if(AllParam.showNames)
{
strXML+=" showNames='"+AllParam.showNames+"'";
}
if(AllParam.exportEnabled)
{
strXML+=" exportEnabled='"+AllParam.exportEnabled+"'";
}
if(AllParam.exportAtClient)
{
strXML+=" exportAtClient='"+AllParam.exportAtClient+"'";
}
if(AllParam.exportHandler)
{
strXML+=" exportHandler='"+AllParam.exportHandler+"'";
}
if(AllParam.numberPrefix)
{
strXML+=" numberPrefix='"+AllParam.numberPrefix+"'";
}
if(AllParam.numberSuffix)
{
strXML+=" numberSuffix='"+AllParam.numberSuffix+"'";
}
if(AllParam.showValues)
{
strXML+=" showValues='"+AllParam.showValues+"'";
}
if(AllParam.showPercentageInLabel)
{
strXML+=" showPercentageInLabel='"+AllParam.showPercentageInLabel+"'";
}
if(AllParam.pieYScale)
{
strXML+=" pieYScale='"+AllParam.pieYScale+"'";
}
if(AllParam.pieBorderAlpha)
{
strXML+=" pieBorderAlpha='"+AllParam.pieBorderAlpha+"'";
}
if(AllParam.shadowXShift)
{
strXML+=" shadowXShift='"+AllParam.shadowXShift+"'";
}
if(AllParam.shadowYShift)
{
strXML+=" shadowYShift='"+AllParam.shadowYShift+"'";
}
if(AllParam.animation)
{
strXML+=" animation='"+AllParam.animation+"'";
}
if(AllParam.shadowAlpha)
{
strXML+=" shadowAlpha='"+AllParam.shadowAlpha+"'";
}
if(AllParam.pieFillAlpha)
{
strXML+=" pieFillAlpha='"+AllParam.pieFillAlpha+"'";
}
if(AllParam.hovercapbg)
{
strXML+=" hovercapbg='"+AllParam.hovercapbg+"'";
}
if(AllParam.rotateNames)
{
strXML+=" rotateNames='"+AllParam.rotateNames+"'";
}
if(AllParam.yAxisMinValue)
{
strXML+=" yAxisMinValue='"+AllParam.yAxisMinValue+"'";
}
if(AllParam.yAxisMaxValue)
{
strXML+=" yAxisMaxValue='"+AllParam.yAxisMaxValue+"'";
}
if(AllParam.showLimits)
{
strXML+=" showLimits='"+AllParam.showLimits+"'";
}
if(AllParam.caption)
{
strXML+=" caption='"+AllParam.caption+"'";
}
if(AllParam.subCaption)
{
strXML+=" subCaption='"+AllParam.subCaption+"'";
}
if(AllParam.xAxisName)
{
strXML+=" xAxisName='"+AllParam.xAxisName+"'";
}
if(AllParam.yAxisName )
{
strXML+=" yAxisName'='"+AllParam.yAxisName+"'";
}
if(AllParam.showColumnShadow)
{
strXML+=" showColumnShadow='"+AllParam.showColumnShadow+"'";
}
if(AllParam.formatNumberScale)
{
strXML+=" formatNumberScale='"+AllParam.formatNumberScale+"'";
}
return strXML;
}/**
 * FunctionName: Chartdata
 * Describe:   组织数据系列
 * Author: lq
 * @param DataParam数据系列参数
 * AllParam主要定义label横轴的参数
 *
 */
function Chartdata(DataParam,AllParam){
var strXML='';
//组织颜色
var arrColor=new Array();
if(DataParam.Color)
{
arrColor=DataParam.Color.split(',');
}
//是否显示数值
var arrshowValues=new Array();
if(DataParam.showValues){
arrshowValues=DataParam.showValues.split(',');
}
//是否显示数值
var arrshowName=new Array();
if(DataParam.showName){
arrshowName=DataParam.showName.split(',');
}
//取左边轴还是右边轴
var arrparentYAxis=new Array();
if(DataParam.parentYAxis){
arrparentYAxis=DataParam.parentYAxis.split(',');
}
//透明度
var arralpha=new Array();
if(DataParam.alpha){
arralpha=DataParam.alpha.split(',');
}
//数字格式
var arrnumberPrefix=new Array();
if(DataParam.numberPrefix){
arrnumberPrefix=DataParam.numberPrefix.split(',');
}
//数字格式
var arrnumberSuffix=new Array();
if(DataParam.numberSuffix){
arrnumberSuffix=DataParam.numberSuffix.split(',');
}
//组织label横轴
var arrlabel=DataParam.label.split('@,');//由于横轴坐标可能有用","分隔的的label
if(!DataParam.seriesname)
{

var arrvalue=DataParam.value.split(',');
var arrColor=new Array();
if(DataParam.Color)
{
arrColor=DataParam.Color.split(',');
}

for(var i=0;i<arrlabel.length;i++)
   {
if(!arrColor[i])
{
if(GetColorType==1){
arrColor[i]=GetColor(i); if(!arrColor[i]){
arrColor[i]=randomColor();
}

}
if(GetColorType==0){
arrColor[i]=randomColor();
}
}
var Param='';
   if(arrshowName[i]){
   Param +=" showName='"+arrshowName[i]+"'";
   }
   if(arrparentYAxis[i]){
   Param +=" parentYAxis='"+arrparentYAxis[i]+"'";
   }
   if(arralpha[i]){
Param +=" alpha='"+arralpha[i]+"'";
   }
   if(arrColor[i] && DataParam.NoColor!='true'){
Param +=" color='"+arrColor[i]+"'";
   }
   strXML+="<set value='"+arrvalue[i]+"' name='"+arrlabel[i]+"' "+Param+"/>";    }
}else{
strXML+="<categories ";
if(AllParam.Labelfont)
{
strXML +=" font='"+AllParam.labelfont+"'"
}
if(AllParam.LabelfontSize)
{
strXML +=" fontSize='"+AllParam.labelfontSize+"'"
}
if(AllParam.LabelfontColor)
{
strXML +=" fontColor='"+AllParam.labelfontColor+"'"
}
strXML+=">";
   for(var i=0;i<arrlabel.length;i++)
   {
   strXML+="<category  name='"+arrlabel[i]+"' />";
   }
   strXML+="</categories>";
   //组织data部分   
   var arrseriesname=DataParam.seriesname.split(',');
   var arrvalue=DataParam.value.split(';');//每个value之间用','隔开，每组value之间用';'隔开。
   for(var j=0;j<arrseriesname.length;j++)
   {
   if(!arrColor[j])
   {
   if(GetColorType==1){
arrColor[j]=GetColor(j);
if(!arrColor[j]){
arrColor[j]=randomColor();
}
}
if(GetColorType==0){
arrColor[j]=randomColor();
}
   }
   var seriesnameParam='';
   if(arrshowValues[j]){
   seriesnameParam +=" showValues='"+arrshowValues[j]+"'";
   }
   if(arrparentYAxis[j]){
   seriesnameParam +=" parentYAxis='"+arrparentYAxis[j]+"'";
   }
   if(arralpha[j]){
   seriesnameParam +=" alpha='"+arralpha[j]+"'";
   }
   if(arrnumberSuffix[j]){
   seriesnameParam +=" numberSuffix='"+arrnumberSuffix[j]+"'";
   }
   if(arrnumberPrefix[j]){
seriesnameParam +=" numberPrefix='"+arrnumberPrefix[j]+"'";
   }
   if(arrColor[j]){
   seriesnameParam +=" color='"+arrColor[j]+"'";
   }
   strXML+="<dataset seriesname='"+arrseriesname[j]+"' "+seriesnameParam+" >";
   var Aarrvalue=arrvalue[j].split(',');
   for(var k=0;k<Aarrvalue.length;k++)
   {
   strXML +="<set value='"+Aarrvalue[k]+"' />";
   }
   strXML+="</dataset>";
   }

}
return strXML;
}

Answer 11

function Trendlines(TrendlinesParam){
var strXML='';
//开始数值
var arrstartValue=new Array();
if(TrendlinesParam.startValue){
arrstartValue=TrendlinesParam.startValue.split(',');
}
//结束数值
var arrendValue=new Array();
if(TrendlinesParam.endValue){
arrendValue=TrendlinesParam.endValue.split(',');
}
//颜色
var arrColor=new Array();
if(TrendlinesParam.Color){
arrColor=TrendlinesParam.Color.split(',');
}
//显示名称
var arrdisplayValue=new Array();
if(TrendlinesParam.displayValue){
arrdisplayValue=TrendlinesParam.displayValue.split(',');
}
//趋势线粗细
var arrthickness=new Array();
if(TrendlinesParam.thickness){
arrthickness=TrendlinesParam.thickness.split(',');
}
//趋势线粗细
var arrisTrendZone=new Array();
if(TrendlinesParam.isTrendZone){
arrisTrendZone=TrendlinesParam.isTrendZone.split(',');
}
//趋势线优先级
var arrshowOnTop=new Array();
if(TrendlinesParam.showOnTop){
arrshowOnTop=TrendlinesParam.showOnTop.split(',');
}
var arralpha=new Array();
if(TrendlinesParam.alpha){
arralpha=TrendlinesParam.alpha.split(',');
}
strXML +="<trendlines>";
for(var j=0;j<arrstartValue.length;j++)
{
strXML +="<line ";
var Param='';
   if(arrstartValue[j]){
   Param +=" startValue='"+arrstartValue[j]+"'";
   }
   if(arrendValue[j]){
   Param +=" endValue='"+arrendValue[j]+"'";
   }
   if(arralpha[j]){
   Param +=" alpha='"+arralpha[j]+"'";
   }
   if(arrColor[j]){
   Param +=" color='"+arrColor[j]+"'";
   }else{
   Param +=" color='"+randomColor()+"'";
   }
   if(arrshowOnTop[j]){
   Param +=" showOnTop='"+arrshowOnTop[j]+"'";
   }
   if(arrisTrendZone[j]){
   Param +=" isTrendZone='"+arrisTrendZone[j]+"'";
   }
   if(arrdisplayValue[j]){
   Param +=" displayValue='"+arrdisplayValue[j]+"'";
   }
   strXML +=""+Param+"/>";
}
strXML +="</trendlines>";
return strXML;

}/*
function getSingleChartHTML(name,value,arrparam)//单系列
{
//decimalPrecision 取几位小数
//showvalues 图上显示数据 1显示 0不显示
//rotateNames 横轴的值是横向显示还是纵向显示 0横向 1纵向
//divLineAlpha 背景显示横线，0-100，100最深显示
//AlternateHGridAlpha  背景颜色深浅，0-100，100最深显示
//showAlternateHGridColor 背景颜色是白蓝相间还是纯白，1是白蓝相间，0是纯白
//numdivlines 背景颜色的横条显示几条
//rotateNames 横轴上数据的显示，0横向显示，1是后向显示
   var strHTML="<graph "+arrparam+" >";
   var arrName=name.split(',');
   var arrValue=value.split(',');
   for(var i=0;i<arrName.length;i++)
   {
   var Color=randomColor();
   strHTML+="<set value='"+arrValue[i]+"' name='"+arrName[i]+"' color='"+Color+"'/>";
   }
   strHTML+="</graph>";
   return strHTML;
} function getMultiChartHTML(name,value,arrparam,seriesname,seriesnameParam,parentYAxis)//多系列三维图
{
//parentYAxis  根据seriesname的长度传入一个数组[p,p,s,p]，用来显示双轴的情况.默认是单轴
   var strHTML="<graph "+arrparam+" >";
   var arrName=name.split(',');
   var arrValue=value.split(';');//每个value之间用','隔开，每组value之间用';'隔开。  
   var arrSeriesname=seriesname.split(',');
   if(parentYAxis){
   var arrparentYAxis=parentYAxis.split(',');
   }
   //组织时间轴
  strHTML+="<categories>";
   for(var i=0;i<arrName.length;i++)
   {
   strHTML+="<category  name='"+arrName[i]+"' />";
   }
   strHTML+="</categories>";
   //组织name跟value的二维数据
  
   var m=0;//value循环开始的下标
   var n=arrName.length//value循环结束的下标
   for(var j=0;j<arrSeriesname.length;j++)
   {
   var Color=randomColor();
   if(parentYAxis){
   seriesnameParam +="parentYAxis='"+arrparentYAxis[j]+"'";
   }
   strHTML+="<dataset seriesname='"+arrSeriesname[j]+"' "+seriesnameParam+" color='"+Color+"'>";
   var AarrValue=arrValue[j].split(',');
   for(var k=0;k<AarrValue.length;k++)
   {
   strHTML +="<set value='"+AarrValue[k]+"' />";
   }
   strHTML+="</dataset>";
   }
   strHTML+="</graph>";
   return strHTML;
} 
*/
/*
 * FunctionName: FormGraphic
 * Describe:   形成图形函数
 * Author: lq
 * @param type图形总类
 * divID图层ID
 * divWidth图形宽度
 * divHeight图形高度
 *
 */
function FormGraphic(type,divID,divWidth,divHeight,strXML)
{
var swf=''
if(type=='MSLine'){
swf="/Base/FusionCharts/FCF_MSLine.swf";
}else if(type=='Column2D'){
swf="/Base/FusionCharts/FCF_Column2D.swf";
}else if(type=='MSColumn2D'){
swf="/Base/FusionCharts/FCF_MSColumn2D.swf";
}else if(type=='Pie2D'){
swf="/Base/FusionCharts/FCF_Pie2D.swf";
}else if(type=='StackedColumn2D'){
swf="/Base/FusionCharts/FCF_StackedColumn2D.swf";
}else if(type=='StackedArea2D'){
swf="/Base/FusionCharts/FCF_StackedArea2D.swf";
}
var myChart = new FusionCharts(swf, "myChartId", divWidth,divHeight)
myChart.setDataXML(strXML);
myChart.render(divID);
}