- 浏览: 183358 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
di1984HIT:
记录一下。嘿嘿
eclipse中关闭js报错的方法 -
di1984HIT:
谢谢,学习了
jdk输出带缩进格式xml的方法 -
雪狐狼:
为何,每次查询需要 构建datatable?
YUI DataTable 服务器端翻页与排序 -
lijunwyf41:
nd:"nd", // 表示已经发送请求的 ...
jqGrid <-- json --> spring,hibernate之服务器端分页,排序 -
yiyu:
最近不看YUI了,发现一个国产的前端框架,是金蝶出的,叫Ope ...
YUI 3 学习笔记(5)- Attribute类
ExtJs提供了绘制图表的功能,可以绘制折线图、条形图和饼图。这里是一个从servlet获取数据绘制折线图和饼图的例子。下图是最后的结果:
客户端html代码如下:
客户端chart.js代码如下:
其中第一句Ext.chart.Chart.CHART_URL = '../ext/resources/charts.swf';是为了使用当前服务器的文件,如果没有这句话,默认会去adobe的站点取。
折线图和饼图的数据都是通过JsonStore取得的,可以通过url属性指定提供数据的地址,通过baseParam属性指定参数,其实这两个就是向服务器发送POST命令的url地址和参数。
折线图和饼图都是通过Panel的items属性定义的。折线图的xtype是linechart,x轴和y轴通过xField,和yField定义。饼图的xtype是piechart,分类通过categoryField定义,数据通过dataField定义。两者都可以通过listeners定义事件响应函数,这里分别定义了鼠标点击事件。
以下是服务器端的servlet的代码片段:
服务器端比较简单,根据参数分别返回折线图和饼图的数据。
客户端html代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>chart demo</title> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="../ext/ext-all-debug.js"></script> <script type="text/javascript" src="chart.js"></script> </head> <body> <div id="line-chart"></div> <div id="pie-chart"></div> </body> </html>
客户端chart.js代码如下:
Ext.chart.Chart.CHART_URL = '../ext/resources/charts.swf'; Ext.onReady(function() { var lineStore = new Ext.data.JsonStore({ autoDestroy : true, url : '/extapp/ChartServlet', baseParams : { 'type' : 'line' }, root : 'data', fields : ['name', 'visits', 'views'] }); lineStore.load(); // extra extra simple new Ext.Panel({ title : '线图', renderTo : 'line-chart', width : 300, height : 200, layout : 'fit', items : { xtype : 'linechart', store : lineStore, xField : 'name', yField : 'visits', listeners : { itemclick : function(o) { var rec = lineStore.getAt(o.index); Ext.Msg.alert('Item Selected', 'You chose ' + rec.get('name')); } } } }); var pieStore = new Ext.data.JsonStore({ autoDestroy : true, url : '/extapp/ChartServlet', baseParams : { 'type' : 'pie' }, root : 'data', fields : ['season', 'total'] }); pieStore.load(); // extra extra simple new Ext.Panel({ title : '饼图', renderTo : 'pie-chart', width : 300, height : 300, layout : 'fit', items : { xtype : 'piechart', store : pieStore, dataField : 'total', categoryField : 'season', extraStyle : { legend : { display : 'bottom', padding : 5, font : { family : 'Tahoma', size : 13 } } }, listeners : { itemclick : function(o) { var rec = pieStore.getAt(o.index); Ext.Msg.alert('Item Selected', 'You chose ' + rec.get('season')); } } } }); });
其中第一句Ext.chart.Chart.CHART_URL = '../ext/resources/charts.swf';是为了使用当前服务器的文件,如果没有这句话,默认会去adobe的站点取。
折线图和饼图的数据都是通过JsonStore取得的,可以通过url属性指定提供数据的地址,通过baseParam属性指定参数,其实这两个就是向服务器发送POST命令的url地址和参数。
折线图和饼图都是通过Panel的items属性定义的。折线图的xtype是linechart,x轴和y轴通过xField,和yField定义。饼图的xtype是piechart,分类通过categoryField定义,数据通过dataField定义。两者都可以通过listeners定义事件响应函数,这里分别定义了鼠标点击事件。
以下是服务器端的servlet的代码片段:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doPost"); String type = request.getParameter("type"); System.out.println("type = " + type); PrintWriter out = response.getWriter(); if (type.equals("line")) { out.print(lineChartData()); } else if (type.equals("pie")) { out.print(pieChartData()); } } private String lineChartData() { StringBuilder sb = new StringBuilder(); sb.append("{"); sb.append(" data : [{"); sb.append(" name : 'Jul 07',visits : 245000,views : 3000000"); sb.append(" },{"); sb.append(" name : 'Aug 07',visits : 205000,views : 3000000"); sb.append(" },{"); sb.append(" name : 'Sep 07',visits : 115000,views : 3000000"); sb.append(" },{"); sb.append(" name : 'Oct 07',visits : 255000,views : 3000000"); sb.append(" },{"); sb.append(" name : 'Nov 07',visits : 345000,views : 3000000"); sb.append(" },{"); sb.append(" name : 'Dec 07',visits : 315000,views : 3000000"); sb.append(" }]"); sb.append("}"); return sb.toString(); } private String pieChartData() { StringBuilder sb = new StringBuilder(); sb.append("{"); sb.append(" data : [{"); sb.append(" season: 'Summer',total: 150"); sb.append(" },{"); sb.append(" season: 'Fall',total: 245"); sb.append(" },{"); sb.append(" season: 'Winter',total: 117"); sb.append(" },{"); sb.append(" season: 'Spring',total: 184"); sb.append(" }]"); sb.append("}"); return sb.toString(); }
服务器端比较简单,根据参数分别返回折线图和饼图的数据。
发表评论
-
使用fuelux tree
2016-04-19 21:06 2621bootstrap这么火,就是fuelux又是同一家推 ... -
eclipse中关闭js报错的方法
2013-05-18 12:35 1494eclipse中引入yui报错,关闭validation后不 ... -
YUI:带checkbox的TreeView的赋值与读值
2010-09-10 16:08 2120日前做一个用户权限管 ... -
YUI DataTable不显示标题栏的方法
2010-09-07 14:32 1659今天碰到一个怪异的需求,用YUI做的表格不要各字段的标题,即下 ... -
YUI中的模块化使用对话框
2010-08-12 16:30 3838最近在试着用YUI 2.8.1,想到一个将对话框模块化的方法, ... -
YUI 3 学习笔记(5)- Attribute类
2010-03-08 16:07 1988Attribute类用于向一个类添加属性,它给类增加了set和 ... -
YUI 3 学习笔记(4)- Base基类
2010-03-05 17:29 1496Base是一个基础类,通过继承Base可以以一种统一的方式创建 ... -
YUI 3 学习笔记(3)- Event
2010-03-03 16:02 2143YUI的Event包可以用来操 ... -
YUI 3 学习笔记(2)- Node
2010-03-01 17:46 2490Node是用来操作DOM node的工具,实际上每一个Node ... -
YUI 3 学习笔记(1)-YUI Global对象
2010-03-01 15:38 2039YUI3模块已经发布,配套的工具及部件虽然现在还不全,但也计划 ... -
html5 canvas 小试:绘制2次曲线
2010-02-23 17:27 2212canvas是html5中新增加的元素,可以用来在html中通 ... -
设置innerHTML后翻滚的奇怪现象
2010-01-28 16:47 1090最近碰到一个奇怪的问题,记录一下。 处理过程是这样的,画面的 ... -
ie和firefox上都运行流畅的网页分割条
2010-01-13 14:15 1958这两天因工作需要做了一个网页分割条,期间碰到不少问题,好在最后 ... -
检测浏览器支持的javascript版本
2010-01-05 11:31 1479今天找到一段检测浏览器支持的javascript版本的代码,感 ... -
使用YUI layout时菜单被遮挡问题的解决
2009-10-16 14:00 1392使用YUI layout时菜单被遮挡问题的解决 今天在使用Y ... -
javascript中定义类的几种方法
2009-09-02 15:59 1083在javascript中有几种定义类的方式,以下分别列出并说明 ... -
ExtJs树的动态加载
2009-08-06 10:37 4775有时候我们不希望一开始就取得整个树的数据然后初始化树,而是希望 ... -
使用Smooth Navigational Menu实现动态菜单
2009-02-10 14:34 1375在企业应用中一般需要根据登录用户的身份动态生成系统菜单,本文演 ... -
jquery学习笔记(5) AJAX
2009-02-05 10:43 11231. 添加HTML $('#dictionary').loa ... -
jquery学习笔记(4) DOM Manipulation
2009-02-04 14:43 1005本文是Learning JQuery的学习笔记 1. att ...
相关推荐
在生成的地图上无法看到你从后台获取到的值。翻遍百度和必应,给出的答案五花八门,仍旧未解决问题,最后还是一个同事大牛给解决的,在此分享给大家。希望对大家有帮助,,,, 废话不多说,直接上码: $(function ...
rsc数据服务器 管理世界,播放器存储,朋友交流等。jagex将其称为登录服务器。 该服务器使用通过TCP或与rsc-server通信。 特征: 利用进行100%准备好的查询,以实现令人难以置信的性能和符合ACID的事务,而无需...
指标太多或时间分辨率太低都会增加数据点,并可能使空闲服务器超载。 为避免这种情况,请在本地计算机上托管/运行脚本,或者使用较少的指示符多次抓取脚本,然后手动组合CSV。用法只需将在TradingView上发布的图表/...
6、WSDL三层结构服务器访问接口,实现数据同步服务器 7、DataSet转JSON,JSON转DataSet功能 8、报表框架 9、查询框架 10、单选择框、多选择框、日期选择框 11、本地数据库SQLITE的访问及操作、及数据库图片操作 12、...
目标:从plc采集数据到数据库,利用echart绘制实时动态曲线。 1 思路 – django定时执行任务,将数据推送到echart。 – 前端定时读取后端数据,并显示到echart上。 第一种思路貌似走不通,主要考虑第二种方式。 第二...
这是一个非常标准的Ember应用程序,但是您必须在该Github帐户中也使用代理服务器才能从Yahoo获取数据。 代理服务器具有一个用于代理Ember开发服务器的程序,以及另一个用于提供预建文件的文件的程序。 使用Apache ...
在每个公司数据都是大数据的世界中,仅编写SQL查询来获取洞察力已经不够了。 SQL代码组织。 迟早使用纯SQL查询对具有十二个维度的十二个指标进行建模成为维护的噩梦,最终导致构建建模框架。 基础设施。 每
从API获取最新信息 由于API主机的请求,不会在用户每次访问站点时获取数据,而是使用cron作业每小时获取数据。 要手动获取电晕数据,请导航至/data-gatherer并运行node data-gatherer.js 。 一个corona-data.json ...
在应用程序和Barchart的报价服务器之间建立WebSocket连接,然后 您的应用程序请求一个或多个交易品种的市场数据,然后 您的应用程序接收到已订阅交易品种的市场数据流。 文献资料 可以在以下位置访问此SDK的完整...
1. **数据采集与整合**:从多个来源自动采集数据,并将其整合到一个中央数据库中。 2. **数据分析**:应用统计分析方法和机器学习技术来探索各种因素对电影市场表现的影响。 3. **预测模型**:构建并训练预测模型...
它从嵌套服务器获取数据并将其存储在本地数据库中。 该工具是用 PHP 和 Javascript 编写的。 版权所有 (c) 2014 Piethein Strengholt, 安装使用 database.sql 脚本创建一个新表更改 load.php 和 json.php 文件中的...
有时,所有交易者都需要获取外汇货币的历史数据,以进行进一步的价格分析和图表绘制。 通常,这些数据是付费提供的,或者您必须花费大量时间从特殊站点手动上传数据。 但是,大多数外汇经纪商都使用MetaTrader 4...
:chart_increasing: 统计查看所有对等点的数据使用情况和允许的 IP :telephone_receiver: JSON-RPC 2.0 API不需要自定义客户端集成,到处都接受标准 API。 注意: WG-API 目前仅与 WireGuard Linux 内核模块和 ...
塔尼塔图表这是一个简单的(基于 ),用于来自 Tanita ... 您只需从体重秤的 SD 卡(名为 DATA1.CSV、DATA2.CSV、...)中获取其中一个 CSV 文件,然后从以下页面打开它。去做清理和重构代码身体部位鼠标悬停缩放支持...
预算可视化框架 我们的2017年WordPress插件可在此处获取: : 开源预算可视化框架。...显示数据随时间的变化( src/httpdocs/js/chart.js )。 树状图 用作主要的导航组件( src/httpdocs/js/treemap.js )。 桌子 s
Ibovespa应用 ... 获取数据的整个Web部分使用以下域/ ApI: https://statusinvest.com.br/acoes/ https://statusinvest.com.br/bdrs/ https://query1.finance.yahoo.com/v8/finance/chart/none.SA ...
虚拟仪器的测试信号分析与处理技术 3-1:仿真信号.vi 3-2:频谱分析.vi 3-3:取自谱.vi 3-4:求取频响函数.vi 3-5:对各种函数进行计算.vi 3-6:不同的采样方式.vi 3-7:从波形数组中获取波形数据.vi 3-8:数据序列...
:smiling_cat_with_heart-eyes: ... -十几种集成可轻松将购买数据发送到您需要的地方 :hundred_points: 维护良好- :postbox: 强大的支持- :star-struck: 很棒的 安装 请遵循,以获取有关如何使用SDK的更多信息。
13.5.2 获取关联数据 463 13.5.3 编辑数据 464 13.5.4 验证 464 13.6 使用QueryExtender控件 465 13.6.1 使用SearchExperssion 466 13.6.2 使用RangeExpression 467 13.6.3 使用PropertyExpression ...
13.5.2 获取关联数据 13.5.3 编辑数据 13.5.4 验证 13.6 使用QueryExtender控件 13.6.1 使用SearchExperssion 13.6.2 使用RangeExpression 13.6.3 使用PropertyExpression 13.6.4 使用Method...