amcharts动态生成数据(直接使用非文件数据)

qbq

转自：
http://www.hmgis.cn/post/366.html

ExtJS3.0出来了，不出所料，添加了Chart图表功能，但我觉得它自带的四种类型图表实在不怎么样，不够美观。今天在网上找了一下合适的Chart，比较流行的有AMChart和ChartFusion等。于是使用ExtJS和AMChart做了一个简单的图表演示Demo，感觉还不错。
我下载的AMChart类型是amcolumn，即柱状图，大家可以根据需要在http://www.amcharts.com下载合适的图表类型。数据则是使用ASP.NET，不过由于AMChart不支持JSON，所以示例数据就是一个aspx页面response.write一堆XML数据。
其代码如下：
    无标题页
   
   
        
        
        
        
        
            Ext.onReady(function(){
                    var panel = new Ext.Window({
                        title: 'My Panel',
                        applyTo: 'flashcontent',
                        width:520,
                        height:380,
                        html: ''
                    });
                    var so = new SWFObject("amcolumn/amcolumn.swf", "amcolumn", "520", "380", "8", "#FFFFFF");
                    so.addVariable("path", "amcolumn/");
                    so.addVariable("settings_file", encodeURIComponent("amcolumn_settings.xml"));
                    so.addVariable("data_file",  escape("data.aspx"));
                    so.addVariable("preloader_color", "#999999");
                    so.write("chart");
                    panel.show();
            });
   
最后的效果：

还不错，打算把它写成一个扩展组件，免得将来使用时麻烦。

如果是jsp:

ext部分：
var menuPanel = {
            region : 'west',
            contentEl : 'menu',
            collapsible : true,
            split : true,
            xtype: 'treepanel',
            title : 'Navigation',
            autoScroll: true,
            width : 200,
            loader: new Ext.tree.TreeLoader(),
            root: new Ext.tree.AsyncTreeNode({
                expanded: true,
                children: [{
                    text: 'プロジェクト計画',
                    leaf: false,
                    expanded: true,
                    children: [{
                            text: 'プロジェクト一覧',
                            leaf: true
                        }, {
                            text: 'プロジェクトマスタメンテナンス',
                            leaf: true
                        }, {
                            text: '作業量配分',
                            leaf: true,
                            url: 'work'
                        }, {
                            text: 'プロジェクト工数明細照会',
                            leaf: true
                        }, {
                            text: 'マイルストーン一覧',
                            leaf: true
                        }, {
                            text: 'マイルストーン定義＆実績',
                            leaf: true
                        }, {
                            text: '時間配分一覧',
                            leaf: true
                        }, {
                            text: '時間要員配分',
                            leaf: true
                        }, {
                            text: '作業要員配分一覧',
                            leaf: true
                        }, {
                            text: '要員リリース計画',
                            leaf: true,
                            url: 'gantt'
                    }]
                }, {
                    text: 'プロジェクト実績',
                    leaf: false,
                    expanded: true,
                    children: [{
                            text: 'スケジュール管理',
                            leaf: true
                        }, {
                            text: '進捗状況入力',
                            leaf: true
                        }, {
                            text: '進捗報告',
                            leaf: true
                    }]
                }, {
                    text: '品質管理',
                    leaf: false,
                    expanded: true,
                    children: [{
                            text: '品質目標＆計画',
                            leaf: true
                        }, {
                            text: 'チケット一覧',
                            leaf: true
                        }, {
                            text: '新規チケット登録',
                            leaf: true
                        }, {
                            text: 'チケット管理',
                            leaf: true
                        }, {
                            text: '関連チェックリスト指定',
                            leaf: true
                        }, {
                            text: 'チェックリスト入力',
                            leaf: true
                        }, {
                            text: '品質報告',
                            leaf: true
                        }, {
                            text: '要員評価',
                            leaf: true
                    }]
                }]
            }),
            rootVisible: false,
            listeners: {
                click: function(n) {
                    if (n.attributes.leaf) {
// Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.url + '"');
                        if (n.attributes.url == 'gantt') {
                            Ext.get('content-iframe').dom.style.display = 'none';
                            chartsPanel.hide();
                            searchPanel.show();
                            ganttPanel.show();
                        } else if (n.attributes.url == 'work') {
                            searchForm.getForm().url = 'work.do';
                            ganttPanel.hide();
                            chartsPanel.show();
                            drawChart('');
                        } else {
                            searchPanel.hide();
                            ganttPanel.hide();
                            Ext.get('content-iframe').dom.src = n.attributes.url;
                            Ext.get('content-iframe').dom.style.display = '';
                        }
                    }
                }
            }
        };


        var searchForm = new Ext.FormPanel( {
          renderTo : 'searchForm',
          labelAlign : 'top',
          method : "POST",
          url: 'gantt.do',
          frame : true,
          bodyStyle : 'padding:5px 5px 0',
          width : 600,
          items : [ {
                xtype :'textfield',
                fieldLabel :'プロジェクトID',
                id :'taskIDS',
                name :'taskIDS',
                anchor :'95%'
              }, {
                xtype :'textfield',
                fieldLabel :'プロジェクト名',
                id :'taskNameS',
                name :'taskNameS',
                anchor :'95%'
          } ],
          buttons : [ {
            text :'検索',
            handler : search
          } ]
        });
        function drawChart(data) {
          var so = new SWFObject("amcharts/amcolumn/amcolumn/amcolumn.swf", "amcolumn", "520", "400", "8", "#FFFFFF");
          so.addVariable("path", "amcharts/amcolumn/amcolumn/");
          so.addVariable("settings_file", encodeURIComponent("amcharts/amcolumn/amcolumn/amcolumn_settings.xml"));
          if (data=='') {
            so.addVariable("data_file", encodeURIComponent("amcharts/amcolumn/amcolumn/amcolumn_data.xml"));
          } else {
            so.addVariable("data_file", escape(data));
          }
          so.write("columnChart");
        }
        function search() {
            // if (!searchForm.isValid) {alert();}
            var taskID = searchForm.findById('taskIDS').getValue();
            var taskName = searchForm.findById('taskNameS').getValue();
// var startTime = searchForm.findById('startTimeS').getValue();
// var taskExplain = searchForm.findById('taskExplainS').getValue();
            var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
            myMask.show();
            searchForm.getForm().submit({
                clientValidation: true,
                nocache:true,
                params: {
                    taskID : taskID,
                    taskName : taskName
                },
                success: function(form, action) {
                  if (action.result.flag == 'gantt') {
                    drawGantt(action.result.msg);
                  } else if (action.result.flag == 'chart') {
                    drawChart('chartData.jsp');
                  }
                  myMask.hide();
                },
                failure: function(form, action) {
                    myMask.hide();Ext.Msg.alert('Failure', action.result.msg);
// switch (action.failureType) {
// case Ext.form.Action.CLIENT_INVALID:
// Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
// break;
// case Ext.form.Action.CONNECT_FAILURE:
// Ext.Msg.alert('Failure', 'Ajax communication failed');
// break;
// case Ext.form.Action.SERVER_INVALID:
// Ext.Msg.alert('Failure', action.result.msg);
// }
                }
            })
          }
WorkAction.java

public class WorkAction extends Action {
    private WorkService workService;
    public void setWorkService(WorkService workService) {
        this.workService = workService;
    }
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        GanttForm ganttForm = (GanttForm) form;
        String data = this.workService.getWork(ganttForm.getTaskID());
        request.setAttribute("successFlag", true);
        request.getSession().setAttribute("msg", data);
        request.setAttribute("flag", "chart");
        return mapping.findForward("success");
    }
}

success.jsp
{success : ${successFlag}, msg : '${msg}', flag : '${flag}'}

chartData.jsp
${msg}


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u1/55983/showart_2059019.html