amcharts动态生成数据

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 = '';
                     }
                  }
            }
         }
      };

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}

amcharts动态生成数据相关推荐

动态生成数据后绑定事件
HTML代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta chars ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
js动态生成数据列表
我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...
bootstrap-select动态生成数据，设置默认选项（默认值）
bootstrap-select设置选中的属性是selected="selected",只要找出哪一项要设置为默认选项,再设置其属性selected="selected& ...
东软软件动态生成对数据表更新操作的方法
1 public string CreatUpdate() 2 { 3 4 StringPlus strclass = new StringPlus(); 5 StringPlus strclass1 ...
vue动态生成表单元素
前几天接了一个需求,需要动态生成一个表单数据,然后提交,提交完数据后.通过编辑按钮进入时,需要进行数据回填. 一.页面展示: I. 没生成表单前的状态 Vue-UEedit UEedit II. 单机 ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
使用JS动态生成表格数据和分页显示
根据录入的内容动态显示到页面,不需要通过数据库保存,这样子减轻服务器压力.同时如果数据过多,支持分页显示,这些数据到保存时可以一起提交到后台. 效果如下: js代码(要引入JQuery): <! ...

amcharts动态生成数据

amcharts动态生成数据相关推荐

最新文章

热门文章