首页 > 编程开发 > 解决extjs中chart显示不下legend的问题

解决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之前执行哦,最后再来个多列显示的图:

  1. qisg931 5月 26th, 2012 @ 00:39 | #-19

    谢谢,问题已经解决,是在items里面必须要有width,height两个属性,不然看不到效果

  2. 飞尘 5月 26th, 2012 @ 10:17 | #-18

    @qisg931
    解决了就好,共同进步 😉

  3. haikou 1月 17th, 2014 @ 15:56 | #-17

    top和bottom的代码有吗急求,跪拜

  4. synsou 5月 12th, 2014 @ 19:21 | #-16

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

  5. guaiguai 12月 17th, 2014 @ 15:00 | #-15

    你好,我不知道重写的这部分代码应该在哪里写,请详细告诉我一下

  6. guaiguai 12月 17th, 2014 @ 15:04 | #-14

    还有,这适用于5.0不?

  7. 而且他 6月 27th, 2018 @ 17:57 | #-13

    sq

评论提交中, 请稍候...

留言

可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">
Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks