[Ext JS 4] Extjs 图表 Legend(图例)的分行与分列显示| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS 4] Extjs 图表 Legend(图例)的分行与分列显示

## [Ext JS 4] Extjs 图表 Legend(图例)的分行与分列显示
### Extjs 中的Chart 的legend.
Legend, 翻译过来的意思是图例。
在Extjs 的Chart 中， 到底代表什么呢？ 直接看这张图：
![](/upload/picture/2022-09-28/upload_d945c6a590e4535ea70e25649c9dad05.png)
### 右边红色框起来的部分就是Legend 了。
在 Extjs Chart 的定义中， 可以通过配置 legend 的配置值(configs)来设置Legend 显示的位置和样式：
position 配置显示的位置：可以设置的值有 "top","bottom", "left", "right", or "float"。
其他还可以设置图例显示的文字、图的样式等等， 详细可以参见 Ext.chart.Legend 的参考文档。
具体的设置类似：
![](/upload/picture/2022-09-28/upload_3724631487a0fa57b49df70abcbe7993.png)

### Legend 如何分列或者分行 -- 历程
不管居于什么位置，Extjs  Legend 默认的显示方式都是单行或是当列。（根据位置配置的差异）
查阅Legend 的参考文档的所有配置，属性和方法都找不到， 如何将Legend 可以分行或分列显示的方法。
倒是在 legendItem 的参考文档中，找到了 updatePosition( [relativeTo] )的方法。
Legend是整个图例， LegendItem 应该就是里面的每一项图例了。
于是产生了一种解法：
1. 是否可以在合适的时候， 设置legendItem 的位置
首先第一个问题， 什么是合适的时候？ 是否可以在 afterRender 事件中，
但是实际测试发现， 在Chart 的afterRender 中， 图例并没有产生出来。 这个Form ， Grid 的机制看上去不太一样。
没办法，只能先整一个按钮， 通过点击来看看这种解法是否可行。
1)  得到Chart 的legend
```html
var chart = Ext.getCmp("testChart");
var legend = chart.legend;
```
我的Chart Id 是: testChart

2)  得到ChartItems
var legendItems = legend.items;
3)  循环以上数组，设置各Item 的位置， 位置是自己计算出来的(x,y 坐标)
```html
legendItem.updatePosition({x:xPos,y:yPos});
```
位置的确是改变了。

到此， 问题并没有结束，
legend 上的Item 是可以进行点击的， 而且点击之后，相应的图是可以进行显示和隐藏的切换的。
使用以上方式， 发现点击之后， 又恢复原状了。
于是又产生了一种想法，
2. 是否可以给LegendItem 添加, click 事件， 在click 中重新计算位置并更新/
legendItem.on("click",function(){
	legendItem.updatePosition({x:xPos,y:yPos});
});

这样的写法是否繁杂不说， 会发现一个问题：
就是legendItem 必须要点两次以上才能触发上面的function.
而且Dubug 发现， 此时Legend item 有两个click 事件，一个是原生的，一个是后来加的。
这样的方式肯定会存在问题。
所以以上的方式只能宣告失败。

Legend分列或者分行
看来只能从Extjs 的源码层级考虑了。
Extjs Chart 的最底层的技术无非是 SVG, VML.
关于此的详细介绍可以参考：
[Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
而Extjs 的Chart 又是基于raphael 框架之上。  关于raphael 的详细，可以参考官方网站：
http://raphaeljs.com/
思考的历程就统统省去，直接给出结论就是： 重写  Ext.chart.LegendItem 和 Ext.chart.Legend 的 updatePosition方法：
```html
HTMLPUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document TITLE>
<METANAME="Author"CONTENT="oscar999">
<script>
script>
HEAD>
<BODY>
BODY>
HTML>
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scripttype="text/javascript"src="../ext-all-debug.js">script>
<linkhref="../resources/ext-theme-neptune/ext-theme-neptune-all.css"rel="stylesheet"type="text/css" />
<script>
Ext.chart.LegendItem.override({
updateSpecPosition: function(positionTo) {
var me = this,       
            items = me.items,
            ln = items.length,
            i = 0,
            item; 
var posX = positionTo.x;
var posY = positionTo.y;
for (; i < ln; i++) {
            item = items[i];
switch (item.type) {
case'text':
                    item.setAttributes({
x: 20 + posX,
y: posY
                    }, true);
break;
case'rect':
                    item.setAttributes({
translate: {
x: posX,
y: posY - 6
                        }
                    }, true);
break;
default:
                    item.setAttributes({
translate: {
x: posX,
y: posY
                        }
                    }, true);
            }
        }
    }
});
Ext.chart.Legend.override({
updatePosition: function() {
var me = this,
            items = me.items,
            pos, i, l, bbox;
if (me.isDisplayed()) {
            pos = me.calcPosition();
            me.x = pos.x;
            me.y = pos.y;
//items[i].updatePosition({x:100,y:100});
var posX = me.x;
var posY = me.y;
for (i = 0, l = items.length; i < l; i++) {
            	posX = me.x;
            	posY = me.y;
//items[i].updatePosition();               
if(i%2>0)
            	{
            		posX += 80;
            	}
            	posY += parseInt(i/2)*30;
            	items[i].updateSpecPosition({x:posX,y:posY});
            }
            bbox = me.getBBox();
if (isNaN(bbox.width) || isNaN(bbox.height)) {
if (me.boxSprite) {
                    me.boxSprite.hide(true);
                }
            }
else {
if (!me.boxSprite) {
                    me.createBox();
                }
                me.boxSprite.setAttributes(bbox, true);
                me.boxSprite.show(true);
            }
        }
    }
});
script>
<script>
Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
data: [
                {year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
                {year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
                {year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
                {year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
              ]
    });
var chart = Ext.create('Ext.chart.Chart',{
id:'testChart',
animate: true,
shadow: true,
store: store,
legend: {
//position: 'right',
//position:'float',
position: 'bottom',
boxStroke: '#FFF',
legendCol:2,
update:false
            },
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['comedy', 'action', 'drama', 'thriller'],
title: false,
grid: true,
label: {
renderer: function(v) {
returnString(v).replace(/(.)00000$/, '.$1M');
                    }
                }
            }, {
type: 'Category',
position: 'left',
fields: ['year'],
title: false
            }],
series: [{
type: 'bar',
axis: 'bottom',
gutter: 80,
xField: 'year',
yField: ['comedy', 'action', 'drama', 'thriller'],
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1] / 1000000) + 'M');
                    }
                }
            }]
        });
var panel1 = Ext.create('widget.panel', {
width: 800,
height: 400,
title: 'Stacked Bar Chart - Movies by Genre',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
                        chart.save({
type: 'image/png'
                        });
                    }
                });
            }
        }],
items: chart
    });
});
script>
head>
<body>
<divid="my-div">div>
<divid="user-div"class="applicantItem"style="display:none"></divid>div>
</divid>body>
html>
```

注意：
1. 以上并不是一个完整与完美的代码， 只是说明可以使用这种方式进行的POC的代码
2. 排列的位置， 需要自行去运算出来，多行， 还是多列？

效果与总结
最后，给出一下笔者实现的效果
![](/upload/picture/2022-09-28/upload_189f9896e1bf51c70b9699cd25ed425a.png)

当然， 如果LegendItem 比较少的话， 分行与分列并没有什么意义。
比较适用的场景是: legendItem 很多，超过20 甚至30, 大大影响了页面的感官。
不过实际开发中，这种状况应该比较少。
如果实在有这种状况， 就要从需求开始就的慎重考量了，尽量避免出现这种需求， 因为即使开发出来的， 针对如此多的Series , 速度自然快不了。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS 4] Extjs 图表 Legend(图例)的分行与分列显示

网站导航