Extjs 将FusionCharts与Ext JS一起使用

到目前为止，我正在考虑在完全使用ExtJS构建的应用程序中使用FusionCharts。 然而，我不相信有一个特定的推荐实现或连接器可以轻松地将FusionCharts添加到ExtJS应用程序中。其他人在Ext JS应用程序中添加图表的例子有很多：

最后一个讨论了为FusionCharts创建Ext JS类的方法，该类将一些图表功能“包装”到适当的类中：

/* * ?????? : var testdata = { part : { 'Jul 01' : 2000, 'Aug 02' : 2400, 'Sep 03' : 2000, 'Oct 04' :
 * "", 'Dec 05' : null }, zoo : { 'Jul 01' : 4000, 'Aug 02' : 3400, // 'Sep 03' : 3000, // 'Oct 04' :
 * 5200, 'Dec 05' : 4210 }, hotel : { // 'Jul 01' : 6000, 'Aug 02' : 6400, // 'Sep 03' : 7000, 'Oct
 * 04' : 8200, 'Dec 05' : 8100 } }; // this.setChartData(testdata); ????????????
 */


/**
 * ????
 * @class Ext.ux.MSLineChart
 * @extends Ext.Panel
 * @cgf initData : Object ??????.
 * @cgf DwrAction : DWR???? ??????.
 * @cgf baseLoadParam : Object DWR???????.
 * @cgf autoShowChart : boolean ??(true) ??????????.
 * @function loadData() : ??DWR????,????.
 * @cgf imageType ???? : MSColumn2D,MSColumn3D,MSLine,MSArea,MSBar2D,MSBar3D StackedColumn2D,
 * StackedColumn3D,StackedArea2D,StackedBar2D,StackedBar2D,StackedBar3D
 */


Ext.ux.FusionChart = Ext.extend(Ext.Panel, {
      width : 1000,
      height : 600,
      border : false,
      layout : 'fit',
      autoShowChart : true,
      animationflex : true,
      imageType : 'MSLine',


      constructor : function(config) {
          Ext.apply(this, config);


          this.isLineChart = true; // ??????????
          var chartDom = Ext.core.DomHelper.append(document.body, {
                id : 'ux-fc-' + ++Ext.AbstractComponent.AUTO_ID,
                tag : 'div',
                cls : 'x-hidden',
                style : 'z-index:-1;width:100%;height:100%'
            });


          this.chart = new FusionCharts(WEBPATH + '/common/fc/' + this.imageType + '.swf', chartDom.id, '100%', "100%", "0",
            "1", null);
          this.chart.addParam("wmode", "transparent");// ???,????EXT


          if (this.initData) {
              this.setChartData(this.initData);
          } else if (this.DwrAction && this.autoShowChart === true) {
              this.loadData(this.baseLoadParam);
          }
          this.contentEl = this.chart.getAttribute('id');
          Ext.ux.FusionChart.superclass.constructor.call(this);
          this.on('render', this.renderPanel, this);


      },


      renderPanel : function() {


      },


      /** ??DWR??????. */
      loadData : function(param) {
          param = param || {};
          Ext.applyIf(param, this.baseLoadParam);
          var setChartData = Ext.bind(this.setChartData, this);
          this.DwrAction(param, setChartData);
      },


      // ??????XML???render chart
      setChartData : function(data) {
          var animation = this.animationflex == true ? 1 : 0;
          var DataXML = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<chart animation =\"" + animation
            + "\" baseFont=\"??\" baseFontSize=\"12\">";
          var valuePartXML = "", trendlinesXML = "";
          var xNameArray = [];


          if (data['trendlines']) { // ???(??:??,???), ????? : {?:??}
              trendlinesXML = "<trendlines> ";
              for (var key in data['trendlines']) {
                  trendlinesXML += "<line startValue='" + key + "' color='" + data['trendlines'][key].replace('#', '')
                    + "' displayValue='" + key + "' showOnTop='1' />";
              }
              trendlinesXML += "</trendlines>";
              delete data['trendlines'];
          }


          DataXML += "<categories>"
          for (var key in data) {
              if (key.length > 0) {
                  var record = data[key];
                  for (var xName in record) {
                      /* xNameArray.indexOf(xName) == -1 && */
                      if (xName && String(xName).length > 0) {
                          DataXML += "<category label=\"" + xName + "\"/>"; // x???
                          xNameArray.push(xName);
                      }
                  }
                  break; // ????, ???????????. (???????)
              }
          }
          DataXML += "</categories>";
          for (var key in data) { // ??
              if (key.length > 0) {
                  var record = data[key];
                  valuePartXML += "<dataset seriesName=\"" + key + "\">";
                  for (var i = 0; i < xNameArray.length; i++) {
                      var xName = xNameArray[i];
                      if (record[xName] && String(record[xName]).length > 0) {
                          valuePartXML += "<set value=\"" + record[xName] + "\"/>"; // x???
                      } else if (this.isLineChart == true) {
                          record[xName] = this.getEstimated(xName, record, xNameArray);
                          valuePartXML += "<set showValue =\"0\" toolText=\" \" displayValue=\" \"   value=\"" + record[xName] + "\"/>"; // x???
                      }
                  }
                  valuePartXML += "</dataset>";
              }
          }
          DataXML += valuePartXML + trendlinesXML;
          DataXML += "</chart>"
          this.chart.setDataXML(DataXML);
          this.chart.show(); // render
      },


      /** line????????,?????. */
      getEstimated : function(xName, record, xNameArray) {
          var front = null;
          var back = null;
          var space = 2;
          for (var i = xNameArray.indexOf(xName) - 1; i > -1; i--) {
              var currUp = record[xNameArray[i]];
              if (currUp != null && String(currUp).length > 0) {
                  front = Number(currUp);
                  break;
              }
              space++;
          }
          for (var i = xNameArray.indexOf(xName) + 1; i < xNameArray.length; i++) {
              var currDown = record[xNameArray[i]];
              if (currDown != null && String(currDown).length > 0) {
                  back = Number(currDown);
                  break;
              }
              space++;
          }
          if (front == null || back == null) {
              return null;
          } else {
              return (back - front) / space + front;
          }
      }


  })

/**？？？？？：var testdata={部分：{'Jul 01'：2000，'Aug 02'：2400，'Sep 03'：2000，'Oct 04'：
*“，'Dec 05'：null}，动物园：{'Jul 01'：4000，'Aug 02'：3400，//'Sep 03'：3000，//'Oct 04'：
*5200，12月5日：4210}，酒店：{/'7月1日：6000，8月2日：6400，9月3日：7000，10月
*04'：8200，'Dec 05'：8100}；//这个.setChartData（testdata）？？？？？？？？？？？？
*/
/**
* ????
*@class Ext.ux.MSLineChart
*@Ext.Panel
*@cgf initData:Object？？？？？？。
*@cgf-DwrAction:DWR？？？？？？。
*@cgf baseLoadParam:Object DWR？？？？？？？。
*@cgf自动显示图表：布尔值？？？（真）？？？？？？？？？？。
*@function loadData（）：？DWR？？？？，？？？？。
*@cgf imageType？？：MSColumn2D、MSColumn3D、MSLine、MSArea、MSBar2D、MSBar3D StackedColumn2D、，
*StackedColumn3D、StackedArea2D、StackedBar2D、StackedBar2D、StackedBar3D
*/
Ext.ux.FusionChart=Ext.extend（Ext.Panel{
宽度：1000，
身高：600，
边界：错，
布局：“适合”，
自动显示图表：正确，
animationflex：没错，
imageType:'MSLine'，
构造函数：函数（配置）{
Ext.apply（这个，配置）；
this.isLineChart=true；/？？？？？？？？？？
var chartDom=Ext.core.DomHelper.append（document.body{
id:'ux fc-'++Ext.AbstractComponent.AUTO_id，
标签：“div”，
cls:‘x隐藏’，
样式：“z指数：-1；宽度：100%；高度：100%”
});
this.chart=新的FusionCharts（WEBPATH+/common/fc/'+this.imageType+'.swf'，chartDom.id'，100%，“100%，“0”，
“1”，无效）；
this.chart.addParam（“wmode”，“transparent”）；//？，？EXT
if（this.initData）{
this.setChartData（this.initData）；
}else if（this.DwrAction&&this.autoShowChart==true）{
this.loadData（this.baseLoadParam）；
}
this.contentEl=this.chart.getAttribute（'id'）；
Ext.ux.FusionChart.superclass.constructor.call（this）；
this.on（'render'，this.renderPanel，this）；
},
renderPanel:函数（）{
},
/**？？DWR*/
loadData:函数（参数）{
param=param |{}；
Ext.applyIf（param，this.baseLoadParam）；
var setChartData=Ext.bind（this.setChartData，this）；
此.DwrAction（参数，设置图表数据）；
},
//？？？XML？？？渲染图表
setChartData:函数（数据）{
var animation=this.animationflex==true？1:0；
var DataXML=“\n”；
var valuePartXML=“”，trendlinesXML=“”；
var xNameArray=[]；
如果（数据[‘趋势线]）{//？（？：，？），？：{：？}
趋势线Xml=“”；
对于（var输入数据[‘趋势线’]）{
趋势线XML+=“”；
}
趋势线XML+=“”；
删除数据[‘趋势线’]；
}
数据XML+=“”
for（var输入数据）{
如果（key.length>0）{
var记录=数据[键]；
for（记录中的变量xName）{
/*xNameArray.indexOf（xName）==-1&&*/
if（xName&&String（xName）.length>0）{
DataXML+=“”；//x？？？
xNameArray.push（xName）；
}
}
中断；/
}
}
DataXML+=“”；
对于（var键入数据）{/？？
如果（key.length>0）{
var记录=数据[键]；
valuePartXML+=“”；
对于（var i=0；i0）{
valuePartXML+=“”；//x？？？
}else if（this.isLineChart==true）{
record[xName]=this.getEstimated（xName，record，xNameArray）；
valuePartXML+=“”；//x？？？
}
}
valuePartXML+=“”；
}
}
DataXML+=valuePartXML+trendlinesXML；
数据XML+=“”
this.chart.setDataXML（DataXML）；
this.chart.show（）；//呈现
},
/**行，行*/
getEstimated:函数（xName、记录、xNameArray）{
var-front=null；
var-back=null；
var空间=2；
对于（var i=xNameArray.indexOf（xName）-1；i>-1；i--）{
var currUp=record[xNameArray[i]；
if（currUp！=null&&String（currUp）.length>0）{
前端=编号（当前向上）；
打破
}
空间++；
}
对于（var i=xNameArray.indexOf（xName）+1；i0）{
后退=数字（向下）；
打破
}
空间++；
}
如果（前==null | |后==null）{
返回null；
}否则{
返回（后-前）/空格+前；
}
}
})

最好的方法是什么？优点/缺点是什么

任何帮助都非常有用