解决extjs中chart显示不下legend的问题

在extjs中使用chart类绘制图表时,可以通过设置legend来添加图例,但是当图例类型较多时,就会出现legend显示不全的问题,而chart不会根据legend的标签数量做相应的调整。

翻查了官方文档,没有找到有关的说明。

于是又google搜索了一下,依然没有找到有效的解决办法,只是看到有提到可以修改createBox的方法,具体的讨论可以在sencha的论坛查看。

可能语言描述的不是很清楚,通过下面这张图就可以有个很具体的认识了。

这是一张很典型的饼图:

下面是对应的示例代码:

经过一番尝试,实现了legend中标签的多列显示,当标签数量较少时,依然显示一列,数量较多时(大于一列的情况),可以分两列甚至多列显示,在标签的对齐上花费了比较多的精力,最终采用下面的方式,具体的大家看下代码就明白了。

对于Ext.chart.LegendItem类的修改

对于Ext.chart.Legend类的修改

经过上面的修改,就可以实现图例的多列显示了,下面是修改后的效果:

提醒一点,以上的修改是针对legend放在left或者right的情况,对于top和bottom需要考虑的是宽度,有兴趣的朋友可以自行尝试修改。

记得这两个覆盖类的代码要在创建chart之前执行哦,最后再来个多列显示的图:

7 Comments

  1. 你好,实验下,确实不错。有个地方不太好,超过5列之后,上边的黑框有断层,不连续

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.