zoukankan      html  css  js  c++  java
  • 【编程技巧】实现简单柱状图

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

    <% String path = request.getContextPath();

           String basePath = request.getScheme() + "://"

           + request.getServerName() + ":" + request.getServerPort()

                  + path + "/";

    %>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

        <head>

            <base href="<%=basePath%>">

            <title>gridPanel</title>

            <meta http-equiv="pragma" content="no-cache">

            <meta http-equiv="cache-control" content="no-cache">

            <meta http-equiv="expires" content="0">

            <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

            <meta http-equiv="description" content="This is my page">

            <link rel="stylesheet" type="text/css"              href="ext/resources/css/ext-all.css"></link>

            <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

            <script type="text/javascript" src="ext/ext-all.js"></script>

            <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>

            <script type="text/javascript" src="ext/ux/shared/examples.js"></script>

          </head>

            <body>

          <script type="text/javascript">

        Ext.chart.Chart.CHART_URL ="ext/resources/charts.swf";//显示用的swf,一定要加上

        Ext.onReady(function(){   //ext.onReady是网页一加载完的时候就会加载此方法

         Ext.BLANK_IMAGE_URL='../../ext/resources/images/access/tree/s.gif';

         var data = {

           rows:[

                  {id:0,name:'tom',age:24},

                  {id:1,name:'jay',age:18},

                  {id:2,name:'aaa',age:33}

               ]

                    };

         var jsonStore = new Ext.data.JsonStore({

          root:"rows",

          data:data,

          fields:[

                  {name:'personId',mapping:'id'},

                  {name:'personName',mapping:'name'},

                  {name:'personAge',mapping:'age'}

                  ],

                  autoLoad:true

                                               });              

                  new Ext.Panel({ 

                  title:'货币基金储备', 

                 500,

                 height:400,

                 frame:true,

                 applyTo:'panel',

                 layout:'fit',

                 items:{ 

                     xtype:'columnchart', 

                     store:jsonStore, 

                     xField:'personName',

                     yField:'personAge', 

                     listeners:{   

                     itemclick:function(o) {   

                         var rec = jsonStore.getAt(o.index);    

                     Ext.MessageBox.alert('选择提示','您选择了'+rec.get('personName'));   

                   }       

           }     

        }    

         });   

       });

        </script>  

       <div id='panel'>

        </body>

    </html> 

  • 相关阅读:
    log4net Config Examples
    求解:Nhibernate Unknown entity class 的解决办法
    复制Oracle表的结构
    Linux下安装MySQL并为其创建新用户图解教程
    windows下使用ffmpeg进行视频转码,图片拉取的Java测试代码
    Linux下安装Nginx详细图解教程
    Linux下安装Memcached图解教程
    Linux下使用Yum安装ffmpeg
    图解Java中如何将Jar文件打包成exe文件
    Java中实现系统托盘功能(代码全贴,附加运行截图)
  • 原文地址:https://www.cnblogs.com/ejllen/p/3228324.html
Copyright © 2011-2022 走看看