把Fusioncharts封装成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");

};

把Fusioncharts封装成Ext组件的思路及实现相关推荐

把Fusioncharts封装成Ext组件的思路
Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭. 一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里然 ...
monaco-editor基本使用以及monaco-editor封装成vue组件
文章目录一.monaco-editor基本使用二.monaco-editor封装成vue组件一.monaco-editor基本使用以vue2项目为例安装依赖 npm i monaco-edi ...
android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
Vue使用wangEditor 封装成独立组件实现富文本编辑器
1.使用npm安装: npm install wangeditor 2.将编辑器封装一个组件,创建editor.vue组件: <template><div id="edit ...
vue中怎样实现弹出层动画效果？由上而下渐渐显示---封装成复用组件
子组件: <template><div class="home"><!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --& ...
vue 封装dialog_element-dialog封装成子组件
移除 {{Edit}} import UserEditfrom "./UserEdit-dialog.vue"; import updatefrom './Update.vue'e ...
封装element分页组件
项目场景: 将 element-ui 中分页封装成公共组件描述: admin后台中会有很多的表格以及分页的应用,所以考虑将分页分装成公共组件  < ...
纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
react antd confirm content list_React造轮系列：对话框组件 - Dialog 思路
React造轮系列:对话框组件 - Dialog 思路对话框一般是我们点击按钮弹出的这么一个东西,主要类型有 Alter, Confirm 及 Modal, Modal 一般带有半透明的黑色背景.当 ...

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

把Fusioncharts封装成Ext组件的思路及实现相关推荐

最新文章

热门文章

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

把Fusioncharts封装成Ext组件的思路 及实现相关推荐

最新文章

热门文章

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

把Fusioncharts封装成Ext组件的思路及实现相关推荐