- 浏览: 123681 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
xiejin2008:
最近1-2年比较流行的树组件 ztree
Dtree+Jquery动态生成树节点例子《新手可参考》 -
xiejin2008:
cyl5753 写道按照上面的步骤,访问https://127 ...
WebLogic Server 10.3 SSL配置及SSL协议传输的WebSevice调用 -
cyl5753:
按照上面的步骤,访问https://127.0.0.1:700 ...
WebLogic Server 10.3 SSL配置及SSL协议传输的WebSevice调用 -
wang1248912822:
[size=large][/size] [b] ...
Ext3.0 动态数据 Chart 初探 -
fushun_test:
很不错,柱状的每个珠子颜色和饼状的每个部分的颜色可以自定义吗 ...
Ext3.0 动态数据 Chart 初探
学习了Ext的Chart,看了官方提供的Example,也搜索了些资料。整理出了一份Ext Chart定时动态获取后台的Json数据的Demo。
参考的不错的文章有:
第一篇文章:http://atian25.iteye.com/blog/413947
这个有用的:关于Chart的一些样式和具体配置的用法参数:http://developer.yahoo.com/yui/charts/
Yahoo: http://developer.yahoo.com/flash/astra-flash/
http://www.hmgis.cn/post/366.html
发现ExtJs Chart的一个Bug: http://blog.csdn.net/acsu/archive/2009/11/26/4881834.aspx
如何自定义 ExtJS.chart.PieChart 各分块的颜色
http://www.cnblogs.com/beginor/archive/2009/11/22/1608034.html
Demo整体思路:
Servlert将List封装了JavaBean对象,JavaBean对象中的属性数据随机产生,然后通过Json-lib将List转换成json格式字符串,并且打印。
然后页面Js通过Ext.data.JsonReader ,Ext.data.Store 读取返回的json格式数据。
工程目录图:
Src目录:DataBean.java ,一个简单的JavaBean类。
DataServert.java 一个产生数据的Servlet 类(返回Json格式数据)。
WebRoot目录:chart 中,charts.js 关键的js代码。
extjs目录, ext中通用的js,css,swf等资源文件。
效果图片:
关键代码:
javaBean:
package com.bean; import java.io.Serializable; public class DataBean implements Serializable { private static final long serialVersionUID = 1L; private String name = ""; private int visits = 0; private int views = 0; public DataBean (String name, int visits, int views) { this.name = name; this.views = views; this.visits = visits; } public DataBean(){} public String getName () { return name; } public void setName ( String name ) { this.name = name; } public int getVisits () { return visits; } public void setVisits ( int visits ) { this.visits = visits; } public int getViews () { return views; } public void setViews ( int views ) { this.views = views; } }
DataServert:
package com.bean; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import java.util.Random; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; public class DataServert extends HttpServlet { /** * Constructor of the object. */ public DataServert () { super (); } /** * Destruction of the servlet. <br> */ public void destroy () { super.destroy (); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet ( HttpServletRequest request, HttpServletResponse response ) throws ServletException, IOException { response.setContentType ( "text/html;charset=utf-8" ); request.setCharacterEncoding ( "utf-8" ); PrintWriter out = response.getWriter (); String jsonString = ""; List<DataBean> list = new ArrayList<DataBean> (); String[] names = { "1G", "2G", "3G", "4G", "5G", "6G", "7G", "8G" }; Random random = new Random (); for (int i = 0; i < names.length; i++) { int num = random.nextInt ( 100 ) * 100; DataBean data = new DataBean ( names[i], num, num / 2 ); list.add ( data ); } JSONArray arryData = null; arryData = JSONArray.fromObject ( list ); jsonString = "{totalCount:" + list.size () + ",data:" + arryData.toString ().replaceAll ( "\n", "" ) + "}"; System.out.println (jsonString); out.print ( jsonString ); out.flush (); out.close (); } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost ( HttpServletRequest request, HttpServletResponse response ) throws ServletException, IOException { doGet ( request, response ); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init () throws ServletException { // Put your code here } }
charts.js
Ext.chart.Chart.CHART_URL = '../extjs/resources/charts.swf'; // 模板flash var json_store; Ext.onReady(function() { var json_reader = new Ext.data.JsonReader({ idProperty : "name", root : 'data', totalProperty : "totalCount", fields : [{ name : 'name', type : "string" }, { name : 'views', type : "int" }, { name : 'visits', type : "int" }] }); json_store = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : '../DataServert.do', method : 'POST' }), reader : json_reader }); // extra extra simple new Ext.Panel({ title : 'ExtJS.com Visits Trend, 2007/2008 ', renderTo : 'container', width : 500, height : 300, layout : 'fit', items : { xtype : 'linechart', // 类型 store : json_store, xField : 'name', // X轴取值 yField : 'visits', // Y轴取值 listeners : { itemclick : function(o) {// 点击事件. var rec = store.getAt(o.index); Ext.example.msg('被选中项:', '你选择了 {0}.', rec .get('name')); } }, series : [{ type : 'line', // line displayName : '点击数', yField : 'visits', style : { color : '#6666CC' } }] } }); // extra simple new Ext.Panel({ iconCls : 'chart', title : 'ExtJS.com Visits Trend, 2007/2008 (简单样式)', frame : true, renderTo : 'container', width : 500, height : 300, layout : 'fit', items : { xtype : 'columnchart', store : json_store, url : '../extjs/resources/charts.swf', xField : 'name', yField : 'visits', yAxis : new Ext.chart.NumericAxis({ displayName : 'Visits', labelRenderer : Ext.util.Format .numberRenderer('0,0') }), tipRenderer : function(chart, record) { return Ext.util.Format.number( record.data.visits, '0,0') + ' visits in ' + record.data.name; }, chartStyle : { animationEnabled : true,// 是否支持动态数据变化 legend : {// 图例 display : "bottom", spacing : 2, padding : 5, font : { name : 'Tahoma', color : '#3366FF', size : 12, bold : true } } }, series : [{ type : 'column', // line displayName : '点击数', yField : 'visits', style : { color : '#3366FF' } }] } }); // more complex with a custom look new Ext.Panel({ iconCls : 'chart',// 样式 title : 'ExtJS.com Visits and Pageviews, 2007/2008 (复杂样式)', frame : true, renderTo : 'container', width : 500, height : 300, layout : 'fit', items : { xtype : 'columnchart',// 柱状图 store : json_store, url : '../extjs/resources/charts.swf', xField : 'name',// X轴显示的值 yAxis : new Ext.chart.NumericAxis({ displayName : 'Visits', labelRenderer : Ext.util.Format .numberRenderer('0,0') }), // Y 轴显示的值 tipRenderer : function(chart, record, index, series) {// tip渲染 if (series.yField == 'visits') { return Ext.util.Format.number( record.data.visits, '0,0') + ' visits in ' + record.data.name; } else { return Ext.util.Format.number( record.data.views, '0,0') + ' page views in ' + record.data.name; } }, chartStyle : { padding : 10, animationEnabled : true,// 是否支持动态数据变化 font : {// 图表整体字体 name : 'Tahoma', color : 'silver', size : 11 }, border : { // color:'#3399FF', // size:1 }, background : { color : '#CCCCCC',// 背景颜色 alpha : 0.1 // 透明度 // image: // mode:stretch }, legend : {// 图例 display : "bottom", spacing : 2, padding : 5, font : { name : 'Tahoma', color : '#3366FF', size : 12, bold : true } }, dataTip : { // 鼠标经过,数据提示样式 padding : 5,// 提示内容与边框的距离 border : { color : "#FF3333", size : 1 }, background : { color : 0xDAE7F6,// 背景颜色透明度 alpha : .8 // 背景颜色透明度 }, font : { name : 'Tahoma', color : '#FF3300', size : 10, bold : true } }, xAxis : { // X 轴 color : 0x69aBc8, // X轴颜色 majorTicks : {// 大刻度值 color : 0x69aBc8, length : 4 }, minorTicks : {// 小刻度值 color : 0x69aBc8, length : 2 }, majorGridLines : { size : 1, color : '#999999' }, // showLabels:false, labelDistance : 4 }, yAxis : { color : 0x69aBc8, majorTicks : {// 大刻度值 color : 0x69aBc8, length : 4 }, minorTicks : {// 小刻度值 color : 0x69aBc8, length : 2 }, majorGridLines : { size : 1, color : '#999999' } } }, series : [{ type : 'column',// 柱状图 displayName : '浏览数', yField : 'views', style : { // image : 'bar.gif', // mode : 'stretch', color : '#66CCFF' } }, { type : 'column', // line displayName : '点击数', yField : 'visits', style : { color : '#FF3300' // lineAlpha:0.5, // lineColor:'#FF3300', // alpha:0.8, // size:10 } }] } }); // a new example new Ext.Panel({ width : 500, height : 300, renderTo : 'container', title : 'Stacked Bar Chart', items : { xtype : 'stackedbarchart',// 图表类型 store : json_store, yField : 'name', xAxis : new Ext.chart.NumericAxis({ stackingEnabled : true, labelRenderer : Ext.util.Format.usMoney // 格式化渲染 }), chartStyle : { legend : {// 图例 display : "top", spacing : 2, padding : 5, font : { name : 'Tahoma', color : '#3366FF', size : 12, bold : true } }, dataTip : { // 鼠标经过,数据提示样式 padding : 5,// 提示内容与边框的距离 border : { color : "#FF3333", size : 1 }, background : { color : 0xDAE7F6,// 背景颜色透明度 alpha : .8 // 背景颜色透明度 }, font : { name : 'Tahoma', color : '#FF3300', size : 10, bold : true } } }, series : [{ xField : 'views', displayName : '访问量' }, { xField : 'visits', displayName : '点击量' }] } }); // a Pie Chart example new Ext.Panel({ width : 400, height : 400, title : 'Pie Chart with Legend', renderTo : 'container', items : { store : json_store, xtype : 'piechart',// 餅圖 dataField : 'views',// 数据 categoryField : 'name',// 项目 // extra styles get applied to the chart defaults extraStyle : { legend : // 图例 { display : 'bottom', padding : 5, font : { family : 'Tahoma', size : 13 } } } } }); loadData(); }); function loadData() { json_store.reload(); setTimeout('loadData();', 1000); }
Charts.jsp
<%@ 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//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Charts</title> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="../extjs/ext-all.js"></script> <script type="text/javascript" src="charts.js"></script> <!-- Common Styles for the examples --> <link rel="stylesheet" type="text/css" href="../extjs/shared/examples.css" /> <style type="text/css"> #container { padding: 10px; } #container .x-panel { margin: 10px; } #container .x-panel-ml { padding-left: 1px; } #container .x-panel-mr { padding-right: 1px; } #container .x-panel-bl { padding-left: 2px; } #container .x-panel-br { padding-right: 2px; } #container .x-panel-body { } #container .x-panel-mc { padding-top: 0; } #container .x-panel-bc .x-panel-footer { padding-bottom: 2px; } #container .x-panel-nofooter .x-panel-bc { height: 2px; } #container .x-toolbar { border: 1px solid #99BBE8; border-width: 0 0 1px 0; } .chart { background-image: url(chart.gif) !important; } </style> </head> <body> <script type="text/javascript" src="../extjs/shared/examples.js"></script> <!-- EXAMPLES --> <h1> Charts </h1> <div id="container"> </div> </body> </html>
下面附上源码:
- ExtCharts.rar (3.2 MB)
- 下载次数: 884
评论
想问几个问题:
1、如何将X轴定义为时间轴?
2、如果我的X轴是时间轴,如何将后台传得数据(比如时间是个字符串格式的)格式化成YYYY-MM-DD的格式
谢谢!
想问几个问题:
1、如何将X轴定义为时间轴?
2、如果我的X轴是时间轴,如何将后台传得数据(比如时间是个字符串格式的)格式化成YYYY-MM-DD的格式
谢谢!
发表评论
-
Origin字段 Header 为了防止CSRF的攻击
2014-07-08 12:09 1734为了防止CSRF的攻击,我们建议修改浏览器在发送POST请 ... -
eval解析JSON中的注意点
2013-12-08 18:32 740eval解析JSON中的注意点 在JS中将JSON的 ... -
jQuery ajax返回parsererror错误的解决方法
2013-12-04 22:38 1533jQuery ajax返回parsererror错误的解决 ... -
非常不错的Jquery图像报表Javascript类库.
2010-04-13 17:51 6844http://www.highcharts.com/ ... -
纯Java动态生成SVG饼图与JFreeChart超强功能生成SVG图表.
2009-12-13 21:20 4424SVG生成饼图,虽然代码实现,但是感觉太复杂,太耗费时间,还不 ... -
AJAX的中文乱码解决方法整理
2009-03-31 21:43 1161encodeURIComponent(dudu赛车),它是将中 ... -
手机主题网站,征集中文名字!炫出你的创意吧!
2009-03-27 14:58 1456手机主题网站,征集中文名字..炫出你的创意吧!! 网 ... -
Dtree+Jquery动态生成树节点例子《新手可参考》
2009-03-16 22:18 15409Dtree+Jquery动态生成树节点. 最近有朋友问我一个 ... -
Dom4j笔记总结《入门总结》
2009-03-13 08:51 1316Parsing XML 或许你想要做的第一件事情就是 ... -
答复: 代码评审怎么做,做到什么程度合适?
2009-03-11 09:26 1545不知道.看帖的人,有没 ... -
大家一起来讨论讨论像56和优酷等哪些网站,里面的动感相册功能是怎样实现的!
2009-01-08 16:53 1142大家一起来讨论讨论 像56和优酷等哪些网站,里面的动感相册功能 ... -
手机主题网站开发
2009-01-08 13:43 1347工作一段时间了,一直在公司开发这个网站. http:// ... -
SmartUpload缺陷:不能上传大文件,占内存耗CPU
2009-01-07 10:03 4436最近我们的网站项目,有一段时间,服务器运行到一定的时候时,就会 ... -
最近我公司的网站,服务器时间长了.就会报内存溢出.找不到原因
2008-12-22 17:10 1107最近我公司的网站,服务器时间长了,访问量变大.就会报内存溢出. ... -
怎样让一个网站,在搜索引擎中得到更够的搜索率呢?
2008-11-27 09:44 1122我们公司最近在做一个网站,大家提点建议呢,通过哪些方式能够让网 ...
相关推荐
最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包
ext3.0ext3.0ext3.0ext3.0ext3.0ext3.0
Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档
ext 3.0 中文API ext 3.0 中文API ext 3.0 中文API ext 3.0 中文API ext 3.0 中文API
EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传
Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文
EXT 入门实例,以一个简单的登录为例子、、、EXT3.0 登录实例,EXT3.0 源码
Ext3.0使用示例
extjs3.0 ext3.0 ext文档 ext例子
EXT3.0中文API
Ext3.0开发包
Myecplise 设置ext3.0自动提示功能 包含Spket的插件包和ext3.0的提示文件ext.jsb文件 ,以及具体设置操作
最新 发布 ext 3.0 中文 API 文档
ext3.0中的99%的控件的用法。包括表格。表单。分页工具栏。图标等。非常的详细。可以直接运行!
Ext3.0 api 帮助文档
Ext3.0发布RC1版本,API文档:http://extjs.com/deploy/ext-3.0-rc1/docs/
ext3.0包 +Skpet 在eclipse 自动提示 在这里分享啦, 如果不能下载或者不能使用 请留言
Ext 3.0 中文 API CHM 帮助 文档