extjs에서chart가legend를 표시할 수 없는 문제를 해결합니다

extjs에서chart가legend를 표시할 수 없는 문제를 해결합니다
extjs에서chart 클래스를 사용하여 도표를 그릴 때legend를 설정하여 도례를 추가할 수 있지만, 도례 형식이 비교적 많을 때legend 디스플레이가 완전하지 않은 문제가 발생하고,chart는legend의 라벨 수량에 따라 상응하는 조정을 하지 않습니다.
공식 문서를 뒤졌지만 관련 설명을 찾지 못했다.
그래서 구글이 검색해 봤는데 여전히 효과적인 해결 방법을 찾지 못했습니다. 단지createBox를 수정할 수 있는 방법이 언급되었을 뿐입니다. 구체적인 토론은sencha의 포럼에서 볼 수 있습니다.
언어를 잘 묘사하지 못했는지 아래의 그림을 통해 구체적인 인식을 얻을 수 있다.
이것은 매우 전형적인 떡 그림이다.
다음 예제 코드는 다음과 같습니다.

Ext.onReady(function() {
	var data = [];
	for(var i = 1; i <= 21; i++) {
		data.push({
			name : 'a' + i,
			value : i
		});
	}
	var store = Ext.create('Ext.data.Store', {
		fields : ['name', 'value'],
		data : data
	});   var panel1 = Ext.create('Ext.panel.Panel', {
		margin : '20',
		width : 600,
		height : 350,
		title : 'demo',
		renderTo : Ext.getBody(),
		items : {
			width : 600,
			height : 300,
			xtype : 'chart',
			animate : true,
			store : store,
			shadow : true,
			legend : {
				position : 'right',
				itemSpacing:5,
				padding:5
			},
			series : [{
				type : 'pie',
				field : 'value',
				showInLegend : true,
				highlight : {
					segment : {
						margin : 20
					}
				},
				label : {
					field : 'name',
					display : 'rotate',
					contrast : true,
					font : '18px Arial'
				}
			}]
		}
	});
});

한 차례의 시도를 통해legend에서 라벨의 여러 열 표시를 실현했다. 라벨의 수량이 비교적 적을 때 여전히 한 열을 표시하고 수량이 비교적 많을 때(1열보다 큰 경우), 두 열, 심지어 여러 열로 나눌 수 있다. 라벨의 정렬에 비교적 많은 정력을 들였고 최종적으로 아래의 방식을 채택했다. 구체적인 것은 여러분이 코드를 보면 알 수 있다.
Ext.chart의 경우LegendItem 클래스 수정

/**
 * ovrride 'Ext.chart.LegendItem'
 */
Ext.override(Ext.chart.LegendItem, {
	updatePosition : function(relativeTo) {
		var me = this, items = me.items, ln = items.length, i = 0, item;
		if (!relativeTo) {
			relativeTo = me.legend;
		}
		// modify start
		if (me.legend.height > 0 && me.y > me.legend.maxY) {
			var r = Math.ceil((me.y - me.legend.maxY) / me.legend.offsetY);
			me.x += me.legend.columnWidth * r;
			me.y -= me.legend.offsetY * r;
		}
		// modify end
		for (; i < ln; i++) {
			item = items[i];
			switch (item.type) {
				case 'text' :
					item.setAttributes({
						x : 20 + relativeTo.x + me.x,
						y : relativeTo.y + me.y
					}, true);
					break;
				case 'rect' :
					item.setAttributes({
						translate : {
							x : relativeTo.x + me.x,
							y : relativeTo.y + me.y - 6
						}
					}, true);
					break;
				default :
					item.setAttributes({
						translate : {
							x : relativeTo.x + me.x,
							y : relativeTo.y + me.y
						}
					}, true);
			}
		}
	}
});

Ext.chart의 경우Legend 클래스 수정

/**
 * ovrride 'Ext.chart.Legend'
 */
Ext.override(Ext.chart.Legend, {
	createItems : function() {
		var me = this, chart = me.chart, surface = chart.surface, items = me.items, padding = me.padding, itemSpacing = me.itemSpacing, spacingOffset = 2, maxWidth = 0, maxHeight = 0, totalWidth = 0, totalHeight = 0, vertical = me.isVertical, math = Math, mfloor = math.floor, mmax = math.max, index = 0, i = 0, len = items ? items.length : 0, x, y, spacing, item, bbox, height, width;   if (len) {
			for (; i < len; i++) {
				items[i].destroy();
			}
		}   items.length = [];   chart.series.each(function(series, i) {
			if (series.showInLegend) {
				Ext.each([].concat(series.yField), function(field, j) {
					item = Ext.create('Ext.chart.LegendItem', {
						legend : this,
						series : series,
						surface : chart.surface,
						yFieldIndex : j
					});
					bbox = item.getBBox();
					width = bbox.width;
					height = bbox.height;   if (i + j === 0) {
						spacing = vertical ? padding + height / 2 : padding;
					} else {
						spacing = itemSpacing / (vertical ? 2 : 1);
					}   item.x = mfloor(vertical ? padding : totalWidth + spacing);
					item.y = mfloor(vertical ? totalHeight + spacing : padding + height / 2);
					totalWidth += width + spacing;
					totalHeight += height + spacing;
					maxWidth = mmax(maxWidth, width);
					maxHeight = mmax(maxHeight, height);   items.push(item);
				}, this);
			}
		}, me);   me.width = mfloor((vertical ? maxWidth : totalWidth) + padding * 2);
		if (vertical && items.length === 1) {
			spacingOffset = 1;
		}
		me.height = mfloor((vertical ? totalHeight - spacingOffset * spacing : maxHeight) + (padding * 2));
		me.itemHeight = maxHeight;
		// modify start
		var outerHeight = me.chart.height - 20;
		if (items.length >= 2 && me.height > outerHeight) {
			var row = math.floor((outerHeight - padding * 2) / (items[1].y - items[0].y));
			if (row > 0) {
				me.columnWidth = me.width;
				me.width *= math.ceil(items.length / row);
				me.height = outerHeight;
				me.offsetY = items[row].y - items[0].y;
				me.maxY = items[row - 1].y;
			}
		}
		// modify end
	}
});

위의 수정을 통해 그림의 여러 열을 표시할 수 있습니다. 다음은 수정된 효과입니다.
상기 수정은legend가left나right에 놓여 있는 경우에 대한 것이고 top와bottom에 대해 고려해야 할 것은 넓이입니다. 관심 있는 친구는 스스로 수정을 시도할 수 있습니다.
이 두 덮어쓰기 클래스의 코드는chart를 만들기 전에 실행해야 한다는 것을 기억하십시오. 마지막으로 여러 열에 표시된 그림을 다시 보여 주십시오.