首页 > 代码库 > Ext4.1 chart的使用
Ext4.1 chart的使用
id:‘reportsPanel‘,
layout: ‘fit‘,
tbar: [{
text: ‘保存报表‘,
handler: function() {
Ext.MessageBox.confirm(‘确认下载‘, ‘您想保存报表到图片‘, function(choice){
if(choice == ‘yes‘){
chart.save({
type: ‘image/png‘
});
}
});
}
},‘-‘,{
text: ‘分别显示‘,
menu:[{
text:‘整年‘
},‘-‘,{
text:‘季度‘
},‘-‘,{
text:‘月份‘
}]
}],
items:chart
});
var store1 = Ext.create(‘Ext.data.Store‘,{//JsonStore
fields:[‘date‘, ‘price‘, ‘sales‘], //日期、单价、销售额
data: [
{date :‘1/1‘, price : 5, sales : 140},
{date :‘1/2‘, price : 29, sales : 135},
{date :‘1/3‘, price : 18, sales : 125},
{date :‘1/4‘, price : 21, sales : 130},
{date :‘1/5‘, price : 23,sales : 124},
{date :‘1/6‘, price : 16, sales : 137},
{date :‘1/7‘, price : 13, sales : 90},
{date :‘1/8‘, price : 19, sales : 128},
{date :‘1/9‘, price : 21, sales : 159},
{date :‘1/10‘, price : 40, sales : 151},
{date :‘1/11‘, price : 30,sales : 89},
{date :‘1/12‘, price : 19, sales : 130},
{date :‘1/13‘, price : 12, sales : 133},
{date :‘1/14‘, price : 3, sales : 96},
{date :‘1/15‘, price : 23, sales : 142},
{date :‘1/16‘, price : 12, sales : 81},
{date :‘1/17‘, price : 19,sales : 94},
{date :‘1/18‘, price : 11, sales : 119},
{date :‘1/19‘, price : 22, sales : 120},
{date :‘1/20‘, price : 13, sales : 121},
{date :‘1/21‘, price : 35, sales : 135},
{date :‘1/22‘, price : 12, sales : 111},
{date :‘1/23‘, price : 36,sales : 117},
{date :‘1/24‘, price : 19, sales : 117},
{date :‘1/26‘, price : 17, sales : 95},
{date :‘1/27‘, price : 38, sales : 135},
{date :‘1/28‘, price : 12, sales : 122},
{date :‘1/29‘, price : 45, sales : 130},
{date :‘1/30‘, price : 46,sales : 99},
{date :‘1/31‘, price : 7, sales : 130}
]
});
var chart = Ext.create(‘Ext.chart.Chart‘, {
id: ‘chartCmp‘,
xtype: ‘chart‘,
style: ‘background:#fff‘,
theme: ‘Category6‘,
animate: true,
// shadow: true,
maximizable: true,
store: store1,
axes: [{
type: ‘Numeric‘,
position: ‘left‘,
fields: [‘date‘,‘price‘, ‘sales‘],
label: {
renderer: Ext.util.Format.numberRenderer(‘0,0‘)
},
title: ‘价格：百吨‘,
grid: true,
minimum: 0
}, {
type: ‘Category‘,
position: ‘bottom‘,
fields: [‘date‘],
title: ‘日期‘
}],
series: [{//油品，单价价格浮动
type: ‘column‘,
axis: ‘left‘,
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get(‘date‘) + ‘: ‘ + storeItem.get(‘price‘)+‘%‘);
}
},
label: {
display: ‘insideEnd‘,
‘text-anchor‘: ‘middle‘,
field: ‘date‘,
renderer: Ext.util.Format.numberRenderer(‘0‘),
orientation: ‘vertical‘,
color: ‘#333‘
},
xField: ‘date‘,
yField: ‘price‘
},{//销售额
type: ‘line‘,
axis: ‘left‘,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get(‘date‘) + ‘: ‘ + storeItem.get(‘price‘)+‘%‘);
}
},
smooth: true,
markerConfig: {// 由Ext.Draw.Sprite配置项决定
type: ‘circle‘,
size: 4,
radius: 4,
fill: ‘#00f‘,
‘stroke-width‘: 0
},
// fill: true,
// fillOpacity: 0.5,
xField: ‘date‘,
yField: ‘sales‘
}]
});
该图表显示的是不同月份不同单价的销售业绩
图表的几大要素：
1、坐标：上、下、左、右。
坐标的类型，数字、分类...
坐标包含需要显示的坐标值，即绑定的字段
坐标值的样式，比如旋转、字体大小、格式
坐标的最大值、最小值、是否显示网格
坐标旁边显示的文字
2、图表：柱状图、折线图、点图、饼图、区域图、盘表图、雷达图...
图标的类型
图表x、y轴对应的字段
图标上显示的文字，文字的样式、位置
鼠标移上去需要显示的提示信息
3、样式
4、数据
属性介绍：
axes:用来配置坐标，可以配置多个坐标。
type：配置坐标的类型。一般用到的是Numeric、Category
position：配置坐标的位置，比如：上下左右
fields：可以配置多个字段，用来设置坐标显示的值。其实这个配置和series中的yFiled配置项是没有关系的
label：可以配置文字的显示方式。默认显示字段的值。比如设置label旋转一定的度数
label: {
rotate: {
degrees: 315
}
}
title：配置坐标需要显示的title
grid：设定网格的样式。比如设定网格的透明度、样式等。
grid: { // 设定网格颜色值
odd: {
opacity: 1,
fill: ‘#ddd‘,
stroke: ‘#bbb‘,
‘stroke-width‘: 1
}
}
minimum：可以配置坐标的最小值。当然会有对应的最大值maximum。可以配合使用majorTickSteps(主刻度，配置总共有多少个刻度)，minorTickSteps(次刻度，在每个主可短中画次刻度。比如配置10，则数字没增加10，会话一个次刻度)
series：用来配置图表
type：配置图表的类型，图表有很多类型。每个图表都有各自独特的配置项
axis：相对于哪个坐标。因为坐标有多个，图表的高度，总的有个参照。
highlight：设置鼠标移动到图表上面，是否高亮。不过这个反应很慢。
tips：设置鼠标移动到图表上时的提示信息
label：设置图表上显示的文字。可以设置文字的位置、样式。但不是每个图表都有这个配置项。
xField：设定x坐标绑定的字段。因为axes设定了坐标的值，所以这个字段绑定的值必须在axes的坐标值中。
yField：设定y坐标绑定的字段。
Ext4.1 chart的使用