function search_Top()
{
$("#Tchart > * ").remove();
//重新绘图
getData();
}
function getData(){
var sd = sd_date.getSubmitValue();
var ed = ed_date.getSubmitValue();
var income=$("#income").val();
var keyword = $("#keyword").val();
var top = $("#top").val();
$.post("/rest/tcustomerStat/data/tcustomerToChart", { s_cdate: sd, e_cdate: ed ,income:income ,keyword:keyword, top: top },
function(result){
loadChart(eval("(" + result + ")"));//字符串转js对象
});
}
function loadChart(dd){
var dataStore = new Ext.data.JsonStore({
fields:['partyb', 'ccount', 'growing'],
data: dd
});
Ext.create('Ext.panel.Panel', {
title : '员工年龄分布图',
width : '100%',
height : 400,
renderTo: 'Tchart',
layout : 'fit',
items : [{
xtype : 'chart',
store : dataStore,
animate : true,//是否启用动画效果
legend : {
position : 'bottom' //图例位置
},
shadow : true,
series : [{
type : 'pie',//图表序列类型
field : 'ccount',//对应饼状图角度的字段名
showInLegend : false,//是否显示在图例当中 -----------
label : {
field : 'partyb',//标签字段名
contrast : true,
color : '#FFFF00',
renderer : function(v){//自定义标签渲染函数
return v;
},
display : 'middle',//标签显现方式
font : '0px "Lucida Grande"'//字体
},
highlight : {
segment : {
margin: 6 //空白区域宽度
}
},
tips : {
trackMouse : true, //是否启用鼠标跟踪
width : 168,
height : 30,
renderer : function(storeItem) {//自定义渲染函数
var title = storeItem.get('partyb') + ':'+ (storeItem.get('growing')*100).toFixed(3)+"%";
this.setTitle(title);
}
}
}]
}]
});
}
分享到:
相关推荐
spring4.0+hibernate4.3+freemarker+jquery+extjs4.2 在实现了漂亮的首页,图表拖拉都实现了,这里重点是spring4.0和freemarker的搭建,注意其中的包的变化以及配置的不同 main.view为spring的入口,ext的节目为main...
Ext js 4 Charts 图表 一个用Extjs4.0实现的Charts 图表 已经整理,能直接看效果的哦,用着不错,要使用的拿走吧
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...
《Ext JS开发实战》讲解DOM操作、面向对象、Component及Container等基础知识;...针对4.0版本,介绍全新的元素、数据存储模型与图表支持;以记账系统及人人网应用程序为实际案例,体验真实的项目开发流程。
前言 第1章 认识ExtJS 1.1 ExtJS的精彩表现 1.2 ExtJS的前世今生 1.3 是否真的需要学习ExtJS 1.4 ExtJS4.0新特性 1.5 ExtJSUI组件基础 1.6 了解一下类似技术 1.7 本章小结 ...第18章 Chart图表 附录A
最后全面细致地讲解了ExtJS 4.0中新增的主题、图形和图表部分,真正实现完全整合应用ExtJS技术。 《ExtJS Web应用程序开发指南(第2版)》语言通俗易懂,版式清新,并通过大量的实例去讲解技术。对于广大的Web程序员...
在3.2版本中,Ext将增加移动组件,进军移动市场,这将是一次革命性的改进,同时在4.0版本中,除了对HTML5的支持外,还增加画布功能。 还有一点更值得期待,就是Ext的RAD开发工具也在开发当中。估计在不久之后,也...
ExtJS4.0的基本功能、最常用的表单、面板及布局类、常用工具类与函数、让ExtJS开始响应事件、常见Web框架的ExtJS改造、ExtJs对Ajax69支持、增强型模板、数据模型、Grid组件、Tree组件、ExtJs与服务端框架的整合、...
只有前3章。 《ExtJS Web应用程序开发指南(第2版)》共18章和1个附录,是对第1版的全面升级,增补了大量ExtJS 4.0中的...最后全面细致地讲解了ExtJS 4.0中新增的主题、图形和图表部分,真正实现完全整合应用ExtJS技术。
最后全面细致地讲解了extjs 4.0中新增的主题、图形和图表部分,真正实现完全整合应用extjs技术。 《extjs web应用程序开发指南(第2版)》语言通俗易懂,版式清新,并通过大量的实例去讲解技术。对于广大的web程序员...