首页
前端开发
Javascript
EXT FusionCharts集成使用说明

EXT FusionCharts集成使用说明

0 次浏览 0 条评论
rar
rar

EXT 里的 FusionCharts 集成，用得熟了真的挺顺的。

EXT 的组件系统本来就强，尤其适合做数据表格、面板啥的，想做个图表也不难。搭上FusionCharts后，图表这块一下子就灵活多了，柱状、饼图、折线图随便来，动画效果也比较丰富。

要跑起来，几个关键文件得知道：Column3D.swf负责渲染图表，虽然是老 Flash 技术，但配合用还是挺稳的；Data.xml是图表数据源，你也可以用 JSON，看习惯；是几个 UX 扩展脚本——uxchart.js、uxflash.js、uxfusion.js、uxmedia.js，它们主要帮你把 FusionCharts 塞进 EXT 组件里，不用自己手动去搞 DOM。

简单集成流程也就是几个步骤：引库、创建 EXT 容器、配置 FusionCharts 实例，render一下就完事。比如：

Ext.onReady(function() {
  var chartConfig = {
    type: 'column3d',
    width: '100%',
    height: '400',
    renderTo: 'chartDiv',
    dataXML: 'Data.xml'
  };
  var chart = new FusionCharts(chartConfig);
  chart.render();
});

交互方面也不差，配合 EXT 的事件机制，点个柱子触发个弹窗啥的都挺轻松。动态更新图表？也就一两行代码的事。

如果你现在手上有用 EXT 做的系统，正好又有数据可视化的需求，不妨试试这个搭配。虽然 FusionCharts 现在主推的是 HTML5 版本，但老的 SWF 版在一些内网项目里还蛮实用的，尤其是图表效果需求不复杂的时候。

rar 文件大小：96.17KB