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

转自：

 

ExtJS3.0出来了，不出所料，添加了Chart图表功能，但我觉得它自带的四种类型图表实在不怎么样，不够美观。今天在网上找了一下合适的Chart，比较流行的有AMChart和ChartFusion等。于是使用ExtJS和AMChart做了一个简单的图表演示Demo，感觉还不错。

我下载的AMChart类型是amcolumn，即柱状图，大家可以根据需要在下载合适的图表类型。数据则是使用ASP.NET，不过由于AMChart不支持JSON，所以示例数据就是一个aspx页面response.write一堆XML数据。

其代码如下：

   


   

   

       
       
       
       
       

最后的效果：

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

 

如果是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}