系統城裝機大師 - 唯一官網:www.farandoo.com!

當前位置:首頁 > 網絡編程 > JavaScript > 詳細頁面

extjs圖形繪制之餅圖實現方法分析

時間:2020-03-06來源:電腦系統城作者:電腦系統城

本文實例講述了extjs圖形繪制之餅圖實現方法。分享給大家供大家參考,具體如下:

這篇文章將介紹extjs中自帶的餅圖。

extjs圖形繪制之餅圖實現方法分析

代碼如下:


 
  1. Ext.define('ChartPieTest', {
  2. extend: 'Ext.panel.Panel',
  3. autoScroll : true,
  4. initComponent: function () {
  5. var me = this;
  6. me.store = me.createStore();
  7. me.grid = me.getGridPanel();
  8. me.mainPanel = Ext.create('Ext.panel.Panel',{
  9. layout:'fit',
  10. items:[me.grid],
  11. });
  12.  
  13. Ext.apply(me,{
  14. layout:'fit',
  15. items:[me.mainPanel]
  16. });
  17. me.callParent();
  18. me.mainPanel.down('chart').on('cellclick', function(grid, td, cellIndex, record, tr, rowIndex, e,eOpts) {
  19. me.onCellClick(cellIndex, record);
  20. });
  21. },
  22.  
  23. getGridPanel:function(){
  24. var me = this;
  25. return {
  26. xtype:'chart',
  27. insetPadding: 40,
  28. animate : true,// 是否支持動態數據變化
  29. legend: {// 圖例
  30. position: "right",
  31. spacing: 12,
  32. padding: 5,
  33. font: {
  34. name: 'Tahoma',
  35. color: '#3366FF',
  36. size: 12,
  37. bold: true
  38. }
  39. },
  40. store:me.store,
  41. //axes:me.createAxes(),
  42. series:me.createSeries(),
  43. }
  44. },
  45. createStore: function () {
  46. var me = this;
  47. return Ext.create('Ext.data.JsonStore', {
  48. //從后端請求數據
  49. /* fields: [
  50. {name: 'id', mapping: 'id'},
  51. {name:'statTime',mapping:'statTime',type:'date',dateFormat:'time'},
  52. 'activeCount', 'effectiveCount','effectiveProportion',
  53. ],
  54. proxy: {
  55. type: 'ajax',
  56. url: ctx+'/mvc/com/analyze/tblVwMonthUserStat',
  57. reader: {
  58. type: 'json',
  59. root: 'root',
  60. totalProperty: 'totalProperty'
  61. }
  62. },
  63. listeners: {
  64. 'beforeload': function (store, operation, eOpts) {
  65. store.proxy.extraParams.selectYear = me.selectYear
  66. }
  67. },*/
  68. //自己模擬數據
  69. fields: ['name', 'data'],
  70. data: [
  71. { 'name': '中年人', 'data': 10 },
  72. { 'name': '嬰兒', 'data': 7 },
  73. { 'name': '老年人', 'data': 5 },
  74. { 'name': '小孩', 'data': 2 },
  75. { 'name': '青少年', 'data': 27 }
  76. ],
  77. autoLoad: true
  78. });
  79. },
  80.  
  81. createSeries: function () {
  82. var me = this;
  83. var columns = [
  84. {
  85. type: 'pie',
  86. angleField: 'data',
  87. showInLegend: true,
  88. tips: {
  89. trackMouse: true,
  90. width: 140,
  91. height: 40,
  92. renderer: function(storeItem, item) {
  93. // calculate and display percentage on hover
  94. var total = 0;
  95. me.store.each(function(rec) {
  96. total += rec.get('data');
  97. });
  98. this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) +'%');
  99. }
  100. },
  101. highlight: {
  102. segment: {
  103. margin: 5
  104. }
  105. },
  106. label: {
  107. field: 'name',
  108. display: 'rotate',
  109. contrast: true,
  110. font: '18px Arial'
  111. }
  112. },
  113.  
  114. ];
  115. return columns;
  116. }
  117.  
  118. });
  119.  

注:

1.上面中的createStore是創建餅圖所需要的數據的--store。

2.上面中的legend 顯示的右邊的圖例(表明哪塊代表什么數據),legend中的position屬性可以調節圖例的位置。其中有‘left'、‘right',‘bottom'、‘top'分別代表左右下上位置。

3.showInLegend是bool值,為false的時候不顯示上面的圖例。

4.tips這里是當鼠標放在餅圖上的時候顯示的提示性文字,其中的renderer方法中可設置提示哪些內容。

5.label 設置餅圖上顯示文字的一些屬性。其中的display屬性決定文字在餅圖中位置,共有‘outside'、‘rotate'兩種方式,前者表示文字顯示在圖表的外邊,后者文字顯示在圖表的里邊。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

分享到:

相關信息

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

jlzzjlzz亚洲乱熟在线播放