[TOC]

柱状图使用

例子

具体的学习例子，见官方的sdk例子，地址：extjs/sdk/ext-6.5.3/build/examples/kitchensink/?classic#column-basic

简单粗暴，直接将其items（cartesian）复制过来，然后在其上面更改。将一些函数内的数具注释掉。刚开始，进可能的使用较少的功能。先将整个图显示出来再说。然后再深入每个配置项，调节功能。

每项的参数分析

store

以date作为x轴，注意2019-01-01重复了，实际上，同名的，只有最后一个起作用。但是数字，显示，两个都会显示。具体见图。

data:[
	{'date':'2019-07-01','basehospital':'华山医院','price':'11','count':'1'},
	{'date':'2019-07-01','basehospital':'华山医院','price':'13','count':'1'},
	{'date':'2019-07-02','basehospital':'华山医院','price':'22','count':'1'},
]

axes

设置横轴、纵轴。Ext.chart.axis.Axis xtype: axis的一个实例

axes: [{
	type: 'numeric',
	position: 'left',
	minimum: 0,
	titleMargin: 20,
	title: {
		text: '人次'
	},
	// listeners: {
	// 	rangechange: 'onAxisRangeChange'
	// }
}, {
	type: 'category',
	position: 'bottom', //显示在底部
	title:'日期'
}],

series，设置数据源

series: {
	type: 'bar',
	xField: 'date',
	yField: 'price',
	// style: {
	// 	minGapWidth: 20  //每个柱状图的间隔
	// },
	highlight: {//每个轴的高亮
		strokeStyle: 'black',  //选择时的边框颜色
		fillStyle: 'gold'  //选择时的高亮
	},
	label: {
		field: 'price',
		display: 'insideEnd',
		// renderer: 'onSeriesLabelRender'
	}
},

图表自带预览功能

这个功能自Ext.draw.Container继承而来，具体的实现比较荣长，可以在控制台输出，就能跳到对应的代码位置。

{
	text:"预览",
	handler:function(){
		var chart = me.down('cartesian');
		chart.preview();
	}
}

错误处理

sencha app build testing模式下打包，能显示具体的报错信息。如下，提示，某个依赖的组件未认出。

解决方法：

添加依赖，如下。大概就这么多。

requires:[
		'Ext.chart.axis.Numeric',
		'Ext.chart.axis.Category',
		'Ext.chart.series.Bar',
		'Ext.chart.interactions.ItemHighlight',
	],

之前一直以为是项目的配置有问题，但是添加了依赖了啊。

数据处理

由于每次都要频繁的从后台加载数据，所以略做了优化，将请求的参数作为缓存的键值，对数据进行缓存。

me.cacheData={}  //在组件init的时候，进行初始化。   而不是直接在属性上初始化，避免多个公用一个。

var cacheKey=query['start_date']+'#'+query['stop_date'];
//尝试读取缓存，如果存在，直接读缓存，并处理
if(me.cacheData[cacheKey]){
	me.analysisData(me.cacheData[cacheKey]);
	return ;
}
//如果不存在，则发送ajax请求
...