1.配置参数
- { 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[0] + ': ' + item.value[1]);
- this.setTitle(storeItem.get('riqi') + ': ' + item.value[1]);
- }
- },
- 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']
- }
- ]
- }
- }
1.1注解:
- 图表的几大要素:
- 1、坐标:上、下、左、右。
- 坐标的类型,数字、分类...
- 坐标包含需要显示的坐标值,即绑定的字段
- 坐标值的样式,比如旋转、字体大小、格式
- 坐标的最大值、最小值、是否显示网格
- 坐标旁边显示的文字
- 2、图表:柱状图、折线图、点图、饼图、区域图、盘表图、雷达图...
- 图标的类型
- 图表x、y轴对应的字段
- 图标上显示的文字,文字的样式、位置
- 鼠标移上去需要显示的提示信息
- 3、样式
- 4、数据
- axes:用来配置坐标,可以配置多个坐标。
- type:配置坐标的类型。一般用到的是Numeric、Categoryposition:配置坐标的位置,比如:上下左右fields:可以配置多个字段,用来设置坐标显示的值。其实这个配置和series中的yFiled配置项是没有关系的label:可以配置文字的显示方式。默认显示字段的值。比如设置label旋转一定的度数label: {
- rotate: {
- degrees: 315
- }
- }title:配置坐标需要显示的titlegrid:设定网格的样式。比如设定网格的透明度、样式等。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坐标绑定的字段。
2.简单的一维charts demo 为:
- var chartGrid = Ext.create('Ext.grid.Panel',{
- fields:['gridYear','gridNum'],
- columns:[
- {header:'年份',dataIndex:'gridYear',width:100},
- {header:'申请专利',dataIndex:'gridNum',width:100}
- ]
- });
- //折线图
- var chartnumber1 = Ext.create('Ext.chart.Chart', {
- height:400,
- width:800,
- animate:true,
- shadow:true,
- store:panelStore1,
- style:'background:#fff',
- axes:[{//坐标
- type:'Numeric',
- dashSize:10,//坐标轴前导航条长度
- position:'left',
- fields:['preStatics'],
- minimum: mini,
- maximum:maxi,
- grid: {
- //奇数行
- odd : {
- opacity: 1,//不透明
- fill: '#FFFF99',//表格内的填充色
- stroke: '#FF3300',//表格线颜色
- 'stroke-width': 0.5//表格线宽度
- },
- //偶数行
- even : {
- opacity: 0,//透明
- stroke: '#6600CC',//表格线颜色
- 'stroke-width': 0.5//表格线宽度
- }
- },
- majorTickSteps : 20,//主区间数
- minorTickSteps : 3//副区间数
- },
- {
- type:"Category",//目录坐标
- position:"bottom",
- fields:['name'],
- grid:true,
- label: {
- rotate: {
- degrees: 315//x轴 旋转 坐标的字体显示 :斜体
- }
- }
- }
- ],
- series:[{//序列
- type:'line',
- axis:'left',
- xField:'name',//横
- yField:"preStatics",//纵抽字段
- highlight: {
- size: 7,
- radius: 7
- },
- style: {
- opacity: 0.5
- },
- markerConfig: {
- type: 'circle',
- size: 4,
- radius: 4,
- 'stroke-width': 0
- },
- fill: true,//填满区域
- smooth:true,
- tips: {
- trackMouse: true,
- width: 220,
- height: 60,
- layout: 'fit',
- items:[{
- xtype:'container',
- items:[chartGrid]
- }],
- renderer: function(storeItem, item) {storeItem该条数据 item(x,y的值)
- var storeItem = item.storeItem
- var gridStore = chartGrid.store;
- var data = [{
- 'gridYear' :storeItem.get('name'),
- 'gridNum' :storeItem.get('preStatics')
- }]
- gridStore.loadData(data)
- //this.setTitle("年"+storeItem.get('name')+'专利数'+storeItem.get('preStatics'));
- }
- }
- }]
- })