var column_departmentQuotaUsed=new Ext.Panel({
iconCls:'chart',
frame:true,
renderTo: 'column_chart_DepartmentQuotaUsedStatic',
width:1600,
height:600,
layout:'fit',
items: {
xtype: 'columnchart', //图标类型,此处是柱形图 还有其他的图表类型,比如piechart饼状图
store: storeDepartmentQuotaUsedStatic_total, //store 存储的数据
xField: 'season', //X轴表示的数据
yAxis: new Ext.chart.NumericAxis({ //不知道干么用的
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){ //鼠标over在图形上显示的
return record.data.season + "已使用 " +
Ext.util.Format.number(record.data.total, '0,0') + " 配额数,共有 " +
record.data.depart_total + " 配额数"
},
chartStyle: {
padding: 10,
animationEnabled: true,
legend:{ //series显示在哪里 右边
display: "right"
},
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series: [{ //一条柱状图
type: 'column',
displayName: '数量',
yField: 'total', //该柱状图显示的数据 是total的 在store中
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
},{
type : 'column',
displayName : '各部门总数',
yField : 'depart_total',
style : {
image:'bar.gif',
mode: 'stretch',
color : '#FF3300'
}
}
]
}
});
var column_departmentQuotaUsed=new Ext.Panel({
iconCls:'chart',
frame:true,
renderTo: 'column_chart_DepartmentQuotaUsedStatic',
width:1600,
height:600,
layout:'fit',
items: {
xtype: 'columnchart', //图标类型,此处是柱形图 还有其他的图表类型,比如piechart饼状图
store: storeDepartmentQuotaUsedStatic_total, //store 存储的数据
xField: 'season', //X轴表示的数据
yAxis: new Ext.chart.NumericAxis({ //不知道干么用的
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){ //鼠标over在图形上显示的
return record.data.season + "已使用 " + Ext.util.Format.number(record.data.total, '0,0') + " 数,共有 " + record.data.depart_total + " 数"
},
chartStyle: {
padding: 10,
animationEnabled: true,
legend:{ //series显示在哪里 右边
display: "right"
},
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series: [{ //一条柱状图
type: 'column',
displayName: '需求配额',
yField: 'total', //该柱状图显示的数据 是total的 在store中
style: {
image:'bar.gif',
mode: 'stretch',
color:0x99BBE8
}
},{
type : 'column',
displayName : '各部门总配额数',
yField : 'depart_total',
style : {
image:'bar.gif',
mode: 'stretch',
color : '#FF3300'
}
}
]
}
});
var storeDepartmentQuotaUsedStatic_total = new Ext.data.JsonStore({
fields: ['season', 'depart_total','total'], //域
url:"show_quota_pie_dao.asp?chart_type=DepartmentQuotaUsedStatic_total",//url取数据
autoLoad: true, //自动加载
root:"dataList" //根,就是从url中取出数据的开头的部分
});
json store 例如:
{'dataList':[ { 'season':'A部', 'depart_total':'8', 'total':'4' }, { 'season':'B部', 'depart_total':'6', 'total':'1' }, { 'season':'C部', 'depart_total':'7', 'total':'5' }, { 'season':'D部', 'depart_total':'8', 'total':'2' }, { 'season':'E部', 'depart_total':'12', 'total':'9' }, { 'season':'F部', 'depart_total':'8', 'total':'6' }, { 'season':'G部', 'depart_total':'10', 'total':'23.5' }, { 'season':'H部', 'depart_total':'5', 'total':'2' }, { 'season':'I部', 'depart_total':'15', 'total':'2.5' }, { 'season':'总数量', 'depart_total':'62', 'total':'62'} ]}
分享到:
相关推荐
柱状图-ext
个人笔记 Ext框架中图表的设计说明书 分类 基本图表(曲线行) 饼状图 列行图 柱状图
FusionCharts+ext实现的3D效果的柱状图,饼状图
一个用ext4.0实现的图形报表,更具界面列表数据,自动生成图形报表,包括柱形图,折线图,饼状图。
支持富客户端extjs技术 绚丽的报表图形
ext3.*画柱状图的固定值和后台获取数据画图的例子
var store22 = Ext.create('Ext.data.Store',{ fields: ['DICDES', 'TEXTLEN'], autoLoad: true, proxy : { type : 'ajax', url : 'data/charts.json', reader : { type : 'json', ...
该代码知识库是由jquery制作仿照ext框架的知识,内容丰富,包含很多知识,如ext的tree,input输入的验证,form表单的设计,统计试图饼状图、柱状图,窗体wind等知识,欢迎学习该知识。该知识库包含源码和数据,可以直接...
可以利用JS画出各种漂亮的地图,包括直线,曲线,柱状图,饼状图,地图等等。比较漂亮!
14.4.1 柱状图 14.4.2 折线图 14.4.3 饼状图 14.4.4 柱状栈图 第15章 调试JavaScript与HTML 15.1 Firebug的基本使用 15.1.1 开启或关闭Firebug 15.1.2 控制台 15.2 Firebug的应用 15.2.1 源代码调试 ...
14.4.1 柱状图 14.4.2 折线图 14.4.3 饼状图 14.4.4 柱状栈图 第15章 调试JavaScript与HTML 15.1 Firebug的基本使用 15.1.1 开启或关闭Firebug 15.1.2 控制台 15.2 Firebug的应用 15.2.1 源代码调试 ...
珍爱生命远离ligerui - 从helloworld到architecture...接下来找了几个基于jquery实现的ui库,大部分都是收费的,最终确定下来从easyui(后来听说easyui的授权许可与ext类似) ligerui和官方ui里面选一个 jquery ui的样式...
javascript和ext共同开发的统计图,有块状,柱状,饼状三种
完美的季度销量柱状,饼状图,操作日志,工作流
主 Ux 图表文件 Ext.ux.chart.AmCharts...(现在仅适用于柱状图和饼图) 这是如何使用 jsduck jsduck ext/src app --output docs 构建适当文档的最佳方法对于我使用的这个模块:jsduck ext/src/ux/chart/ --output docs
最近在做关于PDF文档添加水印的功能,折腾了好久,终于好了。以下做个记录: 首先会用到iTextSharp组件,大家可以去官网下载,同时我也会在本文中附加进来。 代码中添加引用为: using System;...
用flex开发过程中积累下来的资料,供flex初学者学习! 以下为部分资料标题: /**************************...flex 动态生成柱状图,折线图_IT空间_百度空间 (2) . . . . . . /***************************************/