- 浏览: 800084 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (480)
- Spring (12)
- Hibernate (8)
- Struts2 (4)
- Java 基础-JDK-类-接口-URI-专题研究 (27)
- 线程、线程池、多线程高并发高可用、Socket通信 (15)
- Oracle数据库 (20)
- 一般-前端js-html-其它 (25)
- JYSK-互联网金融、金融科技、支付、公司、新闻等等 (8)
- Ajax-jQuery开源框架 (7)
- Json-轻量级的数据交换格式 (14)
- JavaScript (15)
- Jsp、Servlet、Servlet+JSP+JavaBean开发模式(MVC) (18)
- Html-JavaScript-前端-调用接口 (12)
- Sql Server 2005 (6)
- 正则表达式 (2)
- Java tools (18)
- 加签与验签、加密与解密 (3)
- Ajax技术核心-xmlHttpRequest(简称XHR) (6)
- xml-数据交换格式 (3)
- 信息采集 (1)
- Http - Https - HttpClient - httpCore-SSL-TLS (10)
- HtmlParser (2)
- 标签库 (1)
- SMS (2)
- jxl-导入导出 (4)
- poi-导入导出 (2)
- 定时器Timer+Quartz (6)
- 工作流引擎JBPM3.2.3 (4)
- 工作流引擎JBPM4 (0)
- 数据源-JNDI (0)
- tomcat、weblogic等应用服务器 (6)
- 工作流引擎jbpm5 (1)
- 搜索引擎Lucene (1)
- ant (1)
- 大数据-HBase (2)
- bigtable (0)
- 数据库设计 (4)
- jquery tab (0)
- mybatis (5)
- jquery ui 1.10.3 (5)
- Jboss7 (1)
- 规则引擎drools (0)
- 工作流引擎Activiti5 (0)
- 数据库-用户自定义函数 (0)
- 数据库-存储过程 (2)
- 数据库-视图 (0)
- 数据库-触发器 (0)
- 数据库-sql (2)
- highcharts-图表工具 (1)
- sql server 2008 (6)
- 诗词-工作室 (2)
- 数据割接 (1)
- GIS-地理信息系统 (2)
- RS-遥感技术 (1)
- GPS-全球定位系统 (1)
- java整合flex_RIA开发 (3)
- C#编程语言 (5)
- webservice_axis2_cxf_soap_wsdl (2)
- sql语句 (3)
- Flex_WebService_GIS (25)
- PHP编程语言 (0)
- ExtJS4.2 (1)
- Spring mvc (5)
- EasyUI1.4.2 (16)
- 日期时间工具类 (4)
- 随机数 (1)
- Arcgis api for js (0)
- Mysql数据库 (9)
- 移动互联网 java html5/flash socket netty (0)
- API接口 (1)
- AndroidStudio (0)
- Git (2)
- Maven (5)
- IDEA (0)
- 大数据-Hadoop (2)
- JPA (0)
- Spring boot (4)
- JSF (0)
- nginx_lua_module_redis (2)
- Activiti (1)
- bootstrap (1)
- AngularJS (10)
- 数据库-索引 (1)
- Linux及其连接工具SSH (4)
- java日志管理 (2)
- islider滑动控件 (1)
- jquery (1)
- 异常处理Exception (1)
- 秒杀与类秒杀系统 (1)
- 连接数据库、数据库连接池 (4)
- 数据库-临时表 (1)
- 软件设计模式-单例、多例、代理、工厂、观察者 (3)
- 集合框架 (5)
- 人工智能--Artificial intelligence、神经网络算法、机器学习 (1)
- 分布式应用 (1)
- SOA服务-Dubbo框架-Thrift框架 (2)
- Zookeeper分布式服务框架 (2)
- intellij idea (1)
- python编程语言 (0)
- 消息队列_MQ (0)
- 消息队列_RabbitMQ (2)
- 消息队列_ActiveMQ (1)
- 消息队列_Kafka (2)
- 缓存_Redis (4)
- 缓存_Memcache (0)
- 缓存_Ehcache (0)
- ivy-ivyde (1)
- google-protocol buffers (1)
- 正向代理-正向代理服务器 (1)
- 反向代理-反向代理服务器 (1)
- JVM内存模型 (0)
- Thunder框架 (1)
- NIO-非阻塞式IO (0)
- 软件测试、性能测试 (1)
- 序列化、Serializable接口、Externalizable接口 (3)
- 线程池-ExecutorService-ThreadPoolExecutor (1)
- web.xml (1)
- java开发-java工具-实用工具网站 (6)
- 医疗 (1)
- Filter-过滤器 (2)
- Unicode码-双字节字符编码 (1)
- OpenResty (1)
- 计算机网络 (1)
- eclipse_myeclipse_intellij idea (3)
- Enum (1)
- 大数据--Big Data (1)
- 云计算--Cloud computing (1)
- Elastic-Job (1)
- Redis (2)
- 文件流-IO操作 (6)
- 计算机基础知识 (1)
- Hessian-二进制RPC协议 (1)
- String类 (3)
- BigDecimal类 (1)
- java重要接口 (1)
- ReactJS (1)
- 跨域问题 (0)
- Map (1)
- 注解 (1)
- ASCII码-单字节字符编码 (1)
- 微服务、微服务架构 (2)
- RPC协议、RPC服务、RPC框架 (0)
- java反射 (1)
- java项目之classpath (1)
- 经典算法-树 (1)
- listener-监听器 (1)
- Interceptor-拦截器 (1)
- pojo javabean (2)
- 计算机科学与技术-进阶 (1)
- 代码规范与文档编写 (1)
- UML-统一建模语言 (1)
- 对接微信、支付宝 (3)
- 压力测试 (1)
- 办公软件-Excel (1)
- 办公软件-PPT (0)
- UTF8、GBK编码 (1)
- 微服务架构:Spring Cloud架构-Dubbo架构 (6)
- Nginx (1)
- 点滴业务 (1)
- form表单-json数据-转换与接口调用 (1)
- Junit单元测试 (1)
- 大数据-Spark (1)
- 大数据-Storm (1)
- 数据库事务-Spring事务 (0)
- elasticsearch (1)
- windows (1)
最新评论
效果:
代码:
代码:
<script> var chart; $(function(){ //初始化日期框 //var myDate = new Date(Date.parse(ym.replace(/-/g, "/"))); var year=<%=year%>; var month=<%=month%>; if(month<10){ $("#tm").val(year+"-0"+month); }else{ $("#tm").val(year+"-"+month); } //第二部:加载chart数据 loadChart(<%=dscd%>,<%=unitId%>,<%=year%>,<%=month%>); //chart结束------------------------------------------ //查询 $("#btn").click(function(){ var ym=$("#tm").val(); var year=ym.substring(0,4); var month=ym.substr(5,2); loadChart(<%=dscd%>,<%=unitId%>,year,month); }); //修改文本框(含readOnly)按退格键会触发history.back()的问题 //onfocus="this.blur();"光标无法定位到文本框无法复制内容,需要时可用 $("input[readOnly]").keydown(function(e) { e.preventDefault(); }); }); //加载chart function loadChart(dscd,unitId,year,month){ $.messager.progress({ title:'系统提示', msg:'数据加载中,请稍候...' }); //chart开始------------------------------------------ //chart准备 chart = new AmCharts.AmSerialChart(); chart.categoryField = "personName";//横坐标 //chart.depth3D = 20; //chart.angle = 30; chart.startDuration = 1; //chart.rotate = true;//柱子方向由左向右//暂时隐藏 // AXES // category----横坐标 var categoryAxis = chart.categoryAxis; categoryAxis.axisColor = "#DADADA"; categoryAxis.title = "值班人员"; //categoryAxis.titleRotation=45; categoryAxis.titleFontSize=12; categoryAxis.titleColor="#555555"; categoryAxis.dashLength = 1; categoryAxis.gridPosition = "start"; categoryAxis.equalSpacing = true; categoryAxis.labelRotation = 0;//旋转度数 // value----纵坐标 var valueAxis = new AmCharts.ValueAxis(); valueAxis.gridColor = "#FFFFFF"; valueAxis.axisColor = "#DADADA"; valueAxis.title = "数量(个)";//y轴坐标 valueAxis.titleColor="#555555"; valueAxis.titleFontSize=12; valueAxis.titleRotation=45; valueAxis.dashLength = 1; chart.addValueAxis(valueAxis); // GRAPH-1 var graph = new AmCharts.AmGraph(); graph.title="值班总数"; graph.valueField = "dutynum";//y值 //graph.colorField = "color";//动态设置//暂时隐藏 graph.lineColor = ['#FFFF1C','#FFFF1C'];//手动设置渐变色---1 graph.bulletColor = "#FFFFFF"; graph.balloonText = "<span style='font-size:12px;color:#444444'>[[category]]: </span><span style='font-size:12px;color:#BB0E03'><b>[[value]]个班</b></span>"; graph.type = "column";//柱状图 graph.lineAlpha = 0; graph.fillAlphas = 1; graph.labelPosition = "top"; graph.labelText = "[[value]]"; graph.labelOffset = 12; graph.showHandOnHover = true; chart.addGraph(graph);//添加图形到chart上 // GRAPH-2 var graph2 = new AmCharts.AmGraph(); graph2.title="值夜班数"; graph2.valueField = "eveningdutynum";//y值 // graph2.colorField = "color2";//暂时隐藏 graph2.lineColor = ['#999999', '#999999'];//手动设置渐变色---2 graph2.bulletColor = "#FFFFFF"; graph2.balloonText = "<span style='font-size:12px;color:#444444'>[[category]]: </span><span style='font-size:12px;color:#BB0E03'><b>[[value]]个夜班</b></span>"; graph2.type = "column";//柱状图 graph2.lineAlpha = 0; graph2.fillAlphas = 1; graph2.labelPosition = "top"; graph2.labelText = "[[value]]"; graph2.labelOffset = 12; graph2.showHandOnHover = true; chart.addGraph(graph2);//添加图形到chart上 // CURSOR var chartCursor = new AmCharts.ChartCursor(); chartCursor.cursorAlpha = 0; chartCursor.zoomable = false; chartCursor.categoryBalloonEnabled = false; chart.addChartCursor(chartCursor); chart.creditsPosition = "top-right"; // LEGEND var legend = new AmCharts.AmLegend(); //legend.useGraphSettings = false; chart.addLegend(legend); // WRITE chart.titleField="title"; //chart.addTitle("月度值班数量统计", 15, '#0000ff', 1, 'border');//暂时隐藏 //chart.addListener("clickGraphItem",queryItem_stat);//点击柱子,grid响应事件//暂时隐藏 chart.write("chartId"); //第一步:渲染chart图形 $('#gridId').datagrid({ //title:"月度值班数量统计(列表展示)", columns:[[ {field:'personName',title:'<font style="font-size:12px;color:#555555">值班人员</font>',width:60}, {field:'dutynum',title:'<font style="font-size:12px;color:#555555">值班总数</font>',width:60}, {field:'eveningdutynum',title:'<font style="font-size:12px;color:#555555">值夜班数</font>',width:60} ]] }); //请求数据-------------------- $.post( sunny.contextPath + '/dutyManage/getStatInfo.do', { dscd : dscd, unitId:unitId, year:year, month:month }, function(result){ $.messager.progress('close'); if(result.length>0){ chart.dataProvider=[]; chart.validateData(); // chart.dataProvider=result; if(month<10){ month="0"+month; } chart.addTitle(year+"年"+month+"月值班数量统计", 12, '#0000ff', 1, 'border'); chart.validateData(); //加载完图形的同时加载表格数据 loadGrid(result); }else{ //$.messager.alert('提示', '数据库中没有记录', 'info'); popTipFun("数据库暂无记录!","infoSunnyIcon",2); chart.dataProvider=[]; chart.validateData(); } }); } //柱子点击后 function queryItem_stat(obj){ //alert(obj.item.category);//横坐标值可以取到 //no use //loadGrid(obj.item.category); } //加载grid function loadGrid(result){ $('#gridId').datagrid({ "onLoadSuccess":function(data){ //$(this).datagrid('selectRow',idx); }, "rowStyler":function(index,row){ if(index%2==0){ return 'background-color:#ccffff;'; }else{ return 'background-color:#ffffff;'; } } }).datagrid("loadData",result); } </script>
发表评论
-
Easyui tree 异步加载
2016-06-01 10:21 15191、效果图 【图1】 【图2】 2、js代码 $(f ... -
easyui datagrid 动态表头 动态columns 的一种实现方式
2016-05-23 18:09 9464function doUpgradeDataQueryFu ... -
easyui datagrid数据查询
2016-05-18 13:56 920function doFirstQueryFun(){ ... -
easyui datebox formatter parser
2015-10-13 15:42 1502//年月日 function myformatter(dat ... -
easyui datagrid rowedit点击编辑行
2015-08-27 11:14 1740onClickRow: function (index, r ... -
easyui dialog 修改title
2015-08-25 19:47 1414方式一: parent.$('#monthDutyAddDi ... -
easyui dialog关闭窗口最好使用destroy而不推荐使用close
2015-08-24 16:05 2757http://blog.csdn.net/maosijunzi ... -
easyui datagrid 数据源获取与表格渲染 demo1 demo2
2015-08-20 14:19 4631demo1:表格和数据同步 $(function() { ... -
easyui messager alert 3秒后自动关闭提示
2015-08-20 10:24 2339function isDatagridEmpty_duty( ... -
easyui datagrid 前台批量传递数据到后台_json
2015-08-19 09:28 2064前台: var rows = $('#mygrid ... -
easyui dialog 子窗口jsp(被弹出窗口)调用父jsp页面方法操作父jsp
2015-08-14 18:08 14534父jsp(monthDuty.jsp'): <scrip ... -
easyui datagrid loadFilter loadData
2015-08-05 17:10 1575不使用loadFilter(弄了半天没反应),直接使用load ... -
easyui messager show和confirm
2015-07-10 17:32 2256//show var sho ... -
jquery easui tabs注册完刷新另一个tabs
2015-07-10 16:21 881========思路:没有的话直接添加,自动刷新;有的话先关闭 ... -
easyui datagrid pagination 自定义分页
2015-07-09 10:56 8180//============================= ...
相关推荐
amCharts导出图片JAVA实现amCharts导出图片JAVA实现
Amcharts 的jsp ajax 实现 Myeclipse源代码工程 Amcharts 的jsp ajax 实现 Myeclipse源代码工程 Amcharts 的jsp ajax 实现 Myeclipse源代码工程 Amcharts 的jsp ajax 实现 Myeclipse源代码工程
在"amcharts js实现折线柱状扇形图统计"这个主题中,我们将深入探讨如何利用AmCharts库来构建这些统计图形。 首先,让我们来看看折线图。折线图是一种常用的数据表示方法,它通过连接一系列数据点形成折线来展示...
在提供的"AmCharts_Test"压缩包文件中,可能包含了示例代码和资源文件,你可以参考这些文件来快速搭建和理解AmCharts的饼图实现。通过深入学习AmCharts的API文档,你可以进一步定制图表,实现更复杂的数据可视化需求...
amcharts.js 漂亮的图形界面。完全利用javascript实现。不需要添加任何的image即可展现绚丽的统计图表
我之前有上传了一个资源“amcharts实现动态曲线”,看到许多评论说不能运行,我在我的博客里面,http://blog.csdn.net/pair00/article/details/5837869有进一步的解释,并且有许多朋友留言改进的方案,只不过闲杂...
amcharts图表统计插件(推荐),商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等)
2. **动态与交互性**:amCharts 的图表是动态的,能够实时响应用户操作,如点击、拖动或悬浮时显示提示信息。这种交互性使得数据更易于理解和分析。 3. **自定义能力**:amCharts 提供了丰富的自定义选项,允许...
**AmCharts离线文档详解** AmCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型和高度定制的功能,使得在Web应用中创建交互式、可视化数据变得轻而易举。这款库适用于各种项目,从简单的个人博客到复杂...
在本篇文章中,我们将深入探讨amCharts如何实现3D柱状图,并通过实际案例来理解其工作原理。 **一、amCharts简介** amCharts是一款基于SVG技术的图表库,支持多种浏览器和设备,包括桌面、移动设备甚至电视。它以...
amCharts 是一款报表图形统计插件,可以生成动态展现的图形,支持用户交互,例如,鼠标放在图的上面,可以显示详细的统计信息。amCharts 提供了多种类型的图表,包括条形图、柱状图、曲线图、饼图、步线、平滑线、K ...
2. **交互性**:amCharts支持用户与图表的直接交互,如点击、悬停和拖拽等操作,这使得用户可以更直观地探索和理解数据。 3. **动画效果**:amCharts的动画效果流畅自然,不仅增加了视觉的吸引力,还能够引导用户的...
4. **数据绑定**: Flex中的数据绑定机制可以将图表直接与后台数据源连接,实现数据的实时更新。 5. **自定义与扩展**: 开发者可以通过覆盖默认行为、添加自定义事件处理程序和扩展现有组件,对amCharts的功能进行...
学习源码有助于理解整个图表的构建过程,以及如何将amCharts库与其他WPF组件协同工作。 总之,使用amCharts在C# WPF项目中创建股票K线图是一种高效且直观的方式。通过学习和理解所提供的源码,你可以快速掌握这个...
二、ASP.NET与amCharts结合 在ASP.NET开发中,你可以通过以下步骤将amCharts集成到项目中: 1. 引入资源:首先,你需要在项目的HTML页面中引入amCharts的JavaScript库和对应的CSS样式表。这通常通过在标签中添加和...
**标题:“amcharts_3.17.3去除logo”** **内容详解:** `amcharts` 是一个流行且功能强大的JavaScript库,主要用于创建交互式的图表和地图。这个特定的版本,`amcharts_3.17.3`,是一个更新至2019年的版本(基于...
在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中使用amCharts库来创建一个股票K线图的示例。WPF是.NET Framework的一部分,用于构建具有丰富图形界面的桌面应用程序。amCharts则是一个功能...
通过ActionScript,你可以与AmCharts库进行交互,设置图表数据、样式、动画等属性。同时,需要将AmCharts的SWF文件集成到HTML页面中,并通过JavaScript或者服务器端脚本传递数据。 动态画图是AmCharts的一大特色,...
AmCharts 是一个强大的数据可视化库,它提供了JavaScript版本的图表工具,可以用于创建各种互动式、高质量的图表和地图。这个库广泛应用于Web应用中,帮助...开发者可以借助AmCharts轻松地在Web应用中实现数据可视化。
AmCharts 是一个强大的JavaScript图表库,它允许开发者创建交互式且视觉吸引人的数据可视化图表。在您提供的压缩包“amcharts_3.19.2.freeDEMO、源码”中,包含了一些关键文件和目录,这些对于理解和使用AmCharts ...