extjs图表绘制之条形图实现方法分析(2)

tips: { trackMouse: true, width: 200, height: 28, renderer: function(storeItem, item) { this.setTitle( "人数:"+storeItem.get('activeCount')+",占比:"+storeItem. get('effectiveProportion') ); } },

6.可以在定义的系列中(series)中定义renderer方法,在此方法中改变条形柱的颜色。

renderer: function(sprite, storeItem, barAttr, i, store) { barAttr.fill = '#3D96AE' return barAttr; },

7.可以在label中调节显示文字的方向和文字显示的位置。

label: { display: 'outside', 'text-anchor': 'middle', field: 'activeCount', renderer: Ext.util.Format.numberRenderer('0'), orientation: 'horizontal',//改变数字方向 水平显示 font: '25px Helvetica, sans-serif', 'text-anchor': 'start', color: 'red', },

display 可以改变文字在图表中的显示位置。‘insideStart',‘insideEnd',‘outside'分别代表在条形柱的最开始,最后面和外面。大家可以自己去试试。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/7cd313ff5cf69620bffdecb56e0e24fa.html