把Fusioncharts封装成Ext组件的思路及实现

最新推荐文章于 2026-06-21 11:37:29 发布

转载最新推荐文章于 2026-06-21 11:37:29 发布 · 1.6k 阅读

标签

#ext #图形 #xml #div #string

javascript/jq/ext 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了将Fusioncharts封装为Ext panel组件的方法，旨在解决现有集成中的问题，如图形替换限制、选项卡更新延迟、参数过多导致的问题，以及布局和属性调整的不便。通过引入ajax POST请求获取XML数据并使用FusionCharts自己的方法展示图形，实现动态更换swf文件、简化布局过程，并允许像Ext组件一样灵活地管理和更新图表。

Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭。

一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里

然后Ext的panel组件使用contentEl把盛图的div放进来.这样做虽然可以,但是经常会出现一些问题.

现在发现的问题:

1.同一个图不能更换swf。

2.使用选项卡时,没渲染过的图不能更新,必须挨个跳一遍。

3.对图形更新时,由于使用的setDataUrl(),参数是get方式传递,如果参数过多会有问题。

4.每个图还需要写放图的div,很麻烦。

5.不能像Ext组件一样随意布局和调整属性。

6.等等。

考虑这些缺点,如果把fusioncharts封装成ext的一种panel组件,

利用baseParams收集参数,可通过ajax-post提交向后台请求xml,

调用fusioncharts自己的setDataXML()对图形进行显示。

对于选项卡必须挨个跳一遍的问题,由于自己可以判断panel是否渲染过,可以选择先把xml数据存放在一个临时的属性里,

渲染时再把最新的xml拿出来即可。

对于动态换图形swf,由于一个panel对应一个图,swf应该只是panel的一个属性,每次panel渲染时会根据swf属性创建图形。

最重要的是,作为一个Ext-panel,放到弹出窗口,提示窗,选项卡里肯定都行,布局起来就非常方便了。

只要放到items:[]里面就能用,如果用xtype就更方便了

以下就是在window里面包含一个panel面板。动态生成html。

function fchart{
var feeStatisticPanel = new Ext.Panel({
html : "<div id='chart1'></div>"
});

var feeStatisticGraphWin = new Ext.Window({
    frame : true,
    width : 416,
    height : 333,
    title : "费用统计图",
    shadow : true,
    modal : true,
    items : [feeStatisticPanel]
});

feeStatisticGraphWin.show();

var string="";
//string用来保存FusionCharts的XML格式及数据。

  var myChart= new FusionCharts(
   basePath+"/portal/assets/FusionCharts/swfs/MSLine.swf?ChartNoDataText=no data",
   "myChartId", "600", "400", "0", "0");
  myChart.setTransparent(true);
  myChart.setDataXML(string);
  myChart.render("chart1");

};