一个坐标配置的实例
{
xtype: 'panel',
layout: 'fit',
title: '趋势图',
//bodyStyle: 'background:#ffc; padding:10px;',
height: 250,
width: 1000,
forceFit: true,
//frame: true,
items: {
id: 'XTYXQK_qushitu_chart',
xtype: 'chart', //设置图表类型
//style: 'background:#000',
animate: true, //开始加载时是否动画
shadow: true, //加上阴影 自动创建一个Ext.Shadow,或一个字符串表示Ext.Shadow.mode影子的显示
store: states,//数据对象
legend: {
position: 'top',
boxStroke: 'border:0px;',
labelFont: '11px Helvetica'
}, //显示 柱子类型标题 或时内容的标题 默认为false 若设为true 默认position-bottom
//axes :轴
axes: [
{
type: 'Numeric', //数字类型轴
position: 'left', //停靠位置
fields: ['huoyueyonghushu', 'crmshibaishu'], //Y轴坐标数据,会取最大值
label: { //轴上数据文本显示 比如label: { rotate: { degrees: 315} } 旋转315°
renderer: Ext.util.Format.numberRenderer('0') },
//title: 'Y坐标',
minimum: 0, //起始点数 默认0
grid: true //显示背景表格对照
},
{
type: 'Category',
position: 'bottom',
//title: '月份',
fields: ['xuhao'],
grid: true,
label: {
//rotate: {degrees: 315},
renderer: function (lbl) {//这边是需求 太多了 然后少显示些X坐标轴的值得
var count = Ext.getCmp('XTYXQK_qushitu_chart').store.data.items.length;
var num1 = parseInt(count / 12);
count % 2 > 0 ? num1++ : '';
return lbl % num1 == 0 ? lbl : '';
}
}
}
],
series: [ //竖条 内容
{
type: 'column',
axis: 'left', //指定Y轴 是左边这条
highlight: true, //鼠标移上去是否高亮显示
tips: {//柱条上面的tip版
trackMouse: true, //鼠标触发
width: 140,
height: 28,
renderer: function (storeItem, item) {//storeItem该条数据 item(x,y的值)
//this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1'));
//this.setTitle(item.value + ': ' + item.value);
this.setTitle(storeItem.get('riqi') + ': ' + item.value);
}
},
title: ['活跃用户数', 'crm失败用户数', '提速失败用户数', '带宽不足用户数'], //柱子的标题 与前面的legend 对应 若没设 则 字段名
label: {//柱子上面的文字
display: 'insideEnd',
'text-anchor': 'middle',
field: ['huoyueyonghushu', 'crmshibaishu'],
renderer: function (lbl) {
var count = Ext.getCmp('XTYXQK_qushitu_chart').store.data.items.length;
return count <= 12 ? lbl : '';
},
orientation: 'vertical', //显示方向
color: '#333'
},
xField: 'xuhao',
yField: ['huoyueyonghushu', 'crmshibaishu']
}
]
}
}