cgDynamGraphDesignMobile.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. var DEFAULT_,
  2. OPTION_,
  3. TYPE_='Pie2D',
  4. TITLE_ = 'Online 动态图表配置',
  5. DATA_,
  6. ANIMATION_ = true,
  7. SHADOW_ = false,
  8. f = true,
  9. BACKGROUND_COLOR = '#FEFEFE',
  10. COO_BACKGROUND_COLOR = '#FEFEFE',
  11. IMAGE_DATA = "";
  12. var color = ['#a5c2d5', '#cbab4f', '#76a871', '#c12c44', '#9f7961', '#6f83a5'];
  13. function doPie(){
  14. DEFAULT_ = {
  15. data : DATA_,
  16. sub_option : {
  17. label : {
  18. background_color : null,
  19. sign : false,
  20. padding : '0 4',
  21. border : {
  22. enable : false,
  23. color : '#666666'
  24. },
  25. fontsize : 12,
  26. fontweight : 600,
  27. color : '#982e35'
  28. }
  29. },
  30. showpercent : true,
  31. yHeight : 30,
  32. decimalsnum : 2
  33. };
  34. }
  35. function doColumn(){
  36. DEFAULT_ = {
  37. data : DATA_,
  38. text_space : TYPE_=='Column3D'?16:6,
  39. coordinate : {
  40. width : '86%',
  41. height : '80%',
  42. color_factor : 0.24,
  43. board_deep:10,//背面厚度
  44. pedestal_height:10,//底座高度
  45. left_board:false,//取消左侧面板
  46. axis : {
  47. color : '#c0d0e0',
  48. width : [0, 0, 1, 0]
  49. },
  50. scale : [{
  51. position : 'left',
  52. scale_enable : false,
  53. label : {
  54. fontsize : 11,
  55. color : '#4c4f48'
  56. }
  57. }]
  58. },
  59. label : {
  60. fontsize : 11,
  61. color : '#4c4f48'
  62. },
  63. zScale:0.5,
  64. bottom_scale:1.1,
  65. sub_option : {
  66. label : {
  67. fontsize : 11,
  68. fontweight : 600,
  69. color : '#4572a7'
  70. },
  71. border : {
  72. width : 2,
  73. color : '#ffffff'
  74. }
  75. }
  76. };
  77. }
  78. function doBar(){
  79. DEFAULT_ = {
  80. data : DATA_,
  81. coordinate : {
  82. width : '80%',
  83. height : '80%',
  84. axis : {
  85. color : '#c0d0e0',
  86. width:[1,1,1,4]
  87. },
  88. scale : [{
  89. position : 'bottom',
  90. scale_enable : false,
  91. label : {
  92. fontsize : 11,
  93. color : '#4c4f48'
  94. }
  95. }]
  96. },
  97. label : {
  98. fontsize : 11,
  99. color : '#4c4f48'
  100. },
  101. zScale:0.5,
  102. bottom_scale:1.1,
  103. sub_option : {
  104. label : {
  105. fontsize : 11,
  106. fontweight : 600,
  107. color : '#4572a7'
  108. },
  109. border : {
  110. width : 2,
  111. color : '#ffffff'
  112. }
  113. }
  114. };
  115. }
  116. function doLine(){
  117. var labels = [], data_l = [];
  118. console.log(DATA_)
  119. for ( var i = 0; i < DATA_.length; i++) {
  120. labels.push(DATA_[i].name);
  121. data_l.push(DATA_[i].value);
  122. }
  123. if (data_l.length == 1) {
  124. alert("折线图至少需要2组数据才能画线哦!请定制数据或者选择其他图形.");
  125. return;
  126. }
  127. DEFAULT_ = {
  128. data_labels : labels,
  129. data : [{
  130. name : '',
  131. value : data_l,
  132. color : '#1f7e92',
  133. linewidth : 3
  134. }],
  135. //update-begin--author:zhangjiaqiang Date:20170213 for:修订移动报表X坐标轴数据信息错误
  136. labels:labels,
  137. //update-end--author:zhangjiaqiang Date:20170213 for:修订移动报表X坐标轴数据信息错误
  138. sub_option : {
  139. label : {
  140. fontsize : 14,
  141. fontweight:600,
  142. color : '#4c4f48'
  143. },
  144. smooth : OPTION_ == '1',
  145. hollow_inside:false,
  146. point_size:16,
  147. hollow : true
  148. },
  149. coordinate : {
  150. width : '84%',
  151. height : '75%'
  152. }
  153. };
  154. }
  155. function doChart() {
  156. if (TYPE_ == 'Pie2D' || TYPE_ == 'Pie3D') {
  157. doPie();
  158. } else if (TYPE_ == 'Column2D' || TYPE_ == 'Column3D') {
  159. doColumn();
  160. } else if (TYPE_ == 'Bar2D') {
  161. doBar();
  162. } else if (TYPE_ == 'LineBasic2D' || TYPE_ == 'Area2D') {
  163. doLine();
  164. }
  165. if (TITLE_ != '') {
  166. DEFAULT_.title = TITLE_;
  167. }
  168. DEFAULT_.width =$(document.body).width();
  169. DEFAULT_.height = $(window).height();
  170. DEFAULT_.render = 'canvasDiv';
  171. DEFAULT_.animation = ANIMATION_;
  172. DEFAULT_.shadow = SHADOW_;
  173. DEFAULT_.shadow_blur = 3;
  174. DEFAULT_.background_color = BACKGROUND_COLOR;
  175. DEFAULT_.footnote = "";
  176. if (DEFAULT_.coordinate) {
  177. DEFAULT_.coordinate.background_color = COO_BACKGROUND_COLOR;
  178. DEFAULT_.coordinate.grid_color = iChart.dark(COO_BACKGROUND_COLOR, 0.3,0.1);
  179. }
  180. /**
  181. * 使导出图片按钮有效
  182. */
  183. DEFAULT_.listeners = {};
  184. DEFAULT_.listeners[ANIMATION_ ? 'afterAnimation' : 'draw'] = function(c) {
  185. try {
  186. download.disabled = false;
  187. IMAGE_DATA = this.target.canvas.toDataURL();
  188. } catch (e) {
  189. // TODO: handle exception
  190. }
  191. }
  192. new iChart[TYPE_](DEFAULT_).draw();
  193. }
  194. function render() {
  195. if (!TYPE_)
  196. return;
  197. download.disabled = true;
  198. if (f) {
  199. doChart();
  200. f = false;
  201. } else {
  202. $canvas.fadeOut(300, function() {
  203. $(this).fadeIn(300);
  204. doChart();
  205. });
  206. }
  207. }
  208. var $form_tbody, $form_tr_temlate, $form_tr_head, $gallery_color_picker, $validateTips, download, download_a;
  209. $(function() {
  210. $validateTips = $("#validateTips");
  211. $form_tbody = $("#form_tbody");
  212. download = document.getElementById("download");
  213. download_a = document.getElementById("download_a");
  214. $gallery_color_picker = $("#gallery_color_picker");
  215. $form_tr_temlate = $('<tr><td><input type="text" class="form_text" /></td><td><input type="text" class="form_text" /></td><td class="td_color"><input type="text" class="form_text"/></td><td><a href="javascript:void(0)" onclick="removeRow(this);">移除</a></td></tr>');
  216. $form_tr_head = $("#form_tr_head");
  217. $("#dialog-download").dialog({
  218. autoOpen : false,
  219. height : 448,
  220. width : 848,
  221. modal : true
  222. });
  223. var w = $(document.body).width();
  224. var datatype, type;
  225. $canvas = $("#canvasDiv");
  226. $(".gallery_draggable").click(function() {
  227. TYPE_ = $(this).attr('type');
  228. OPTION_ = $(this).attr('option');
  229. render();
  230. });
  231. $form_tr_temlate.find('.td_color .form_text').click(function(e) {
  232. $current_color = $(this);
  233. var i = $(this).parents("tr").prevAll().length;
  234. $gallery_color_picker.css("top", 6 + 29 * i).fadeIn();
  235. e.stopPropagation();
  236. });
  237. $("#gallery_color_picker .color").hover(function() {
  238. $(this).addClass("gallery_color_hover");
  239. }, function() {
  240. $(this).removeClass("gallery_color_hover");
  241. }).click(function() {
  242. var color = $(this).attr('color');
  243. $current_color.val(color);
  244. $current_color.parent("td").css("background-color", color);
  245. });
  246. });
  247. function addRow() {
  248. $form_tbody.append($form_tr_temlate.clone(true));
  249. }
  250. function removeRow(a) {
  251. $(a).parents("tr").remove();
  252. }