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> 

  • 相关阅读:
    noip模拟赛(一)宠物之战
    noip模拟赛(一)魔法树
    luogu1097统计数字[noip2007提高组Day1T1]
    luogu1207双重回文数[usaco1.2]Dual Palindromes
    【2018.9.20】JOI 2017 Final T3「JOIOI 王国 / The Kingdom of JOIOI」
    【2018.9.20】JOI 2017 Final T2「準急電車 / Semiexpress」
    Codeforces Round #510
    【2018.9.15】陈老师模拟赛1
    【loj6191】「美团 CodeM 复赛」配对游戏
    【loj6029】「雅礼集训 2017 Day1」市场
  • 原文地址:https://www.cnblogs.com/ejllen/p/3228324.html
Copyright © 2011-2022 走看看