Ei kuvausta

AAChartView.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. <!---->
  2. <!-- Created by An An on 17/1/16.-->
  3. <!-- Copyright © 2017年 An An. All rights reserved.-->
  4. <!--//*************** ...... SOURCE CODE ...... ***************-->
  5. <!--//***...................................................***-->
  6. <!--//*** https://github.com/AAChartModel/AAChartKit ***-->
  7. <!--//*** https://github.com/AAChartModel/AAChartKit-Swift ***-->
  8. <!--//***...................................................***-->
  9. <!--//*************** ...... SOURCE CODE ...... ***************-->
  10. <!--/*-->
  11. <!---->
  12. <!--* --------------------------------------------------------------------------------->
  13. <!--*-->
  14. <!--* ❀❀❀ WARM TIPS!!! ❀❀❀-->
  15. <!--*-->
  16. <!--* Please contact me on GitHub,if there are any problems encountered in use.-->
  17. <!--* GitHub Issues : https://github.com/AAChartModel/AAChartKit/issues-->
  18. <!--* --------------------------------------------------------------------------------->
  19. <!--* And if you want to contribute for this project, please contact me as well-->
  20. <!--* GitHub : https://github.com/AAChartModel-->
  21. <!--* StackOverflow : https://stackoverflow.com/users/7842508/codeforu-->
  22. <!--* JianShu : http://www.jianshu.com/u/f1e6753d4254-->
  23. <!--* SegmentFault : https://segmentfault.com/u/huanghunbieguan-->
  24. <!--*-->
  25. <!--* --------------------------------------------------------------------------------->
  26. <!---->
  27. <!--*/-->
  28. <html>
  29. <head>
  30. <meta charset="UTF-8" />
  31. <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 3.0,user-scalable = no">
  32. <script src="AAHighchartsLib.js">
  33. </script>
  34. <script src="AAHighchartsMore.js">
  35. </script>
  36. <!-- <script src="AAHighcharts-3d.js">-->
  37. <!-- </script>-->
  38. <script src="AAFunnel.js">
  39. </script>
  40. <!-- 若介意本地js代码体积(250KB左右,工程打包压缩后实际体积远小于此)过大,可换用加载网络js代码 -->
  41. <!-- <script src="https://img.hcharts.cn/highcharts/highcharts.js">-->
  42. <!-- </script>-->
  43. <!-- <script src="https://img.hcharts.cn/highcharts/highcharts-more.js">-->
  44. <!-- </script>-->
  45. <style>
  46. *{ -webkit-user-select: none;
  47. user-select: none; }
  48. </style>
  49. </head>
  50. <body>
  51. <div id="container" style="width: min-450px; height: 200px; margin: -8px">
  52. </div>
  53. <script>
  54. var globalChart;
  55. function loadTheHighChartView(sender, receivedWidth, receivedHeight) {
  56. var container = document.getElementById('container'); //获得元素
  57. if (receivedWidth != 0) {
  58. container.style.width = receivedWidth; //设置宽度
  59. }
  60. container.style.height = receivedHeight; //设置高度
  61. var aaOptions = JSON.parse(sender);
  62. if (aaOptions.gradientColorEnabled == true) { //开启图表渐变色功能
  63. var colors = aaOptions.colors;
  64. aaOptions.colors = Highcharts.map(colors,
  65. function(color) {
  66. return {
  67. linearGradient: {
  68. x1: 0,
  69. y1: 0,
  70. x2: 0,
  71. y2: 1
  72. },
  73. stops: [[0, color], [1, Highcharts.Color(color).setOpacity(0.6).get('rgba')]]
  74. };
  75. });
  76. }
  77. Highcharts.setOptions({
  78. lang: {
  79. thousandsSep: ",", //https://api.highcharts.com/highcharts/lang.thousandsSep
  80. resetZoom: aaOptions.zoomResetButtonText //Set 'Reset zoom button' title if title is not set in receivedZoomButtonTitle
  81. }
  82. }); //Set the 'Reset zoom button' title
  83. aaOptions.credits = {
  84. enabled: false
  85. }; //去掉表格右下角版权信息
  86. if (aaOptions.plotOptions) {
  87. var animation = aaOptions.plotOptions.series.animation;
  88. if (animation) {
  89. var animationEasingType = animation.easing;
  90. aaOptions.plotOptions.series.animation.easing = configureTheChartAnimationEasingType(animationEasingType);
  91. }
  92. }
  93. globalChart = Highcharts.chart('container', aaOptions);
  94. }
  95. function configureTheChartAnimationEasingType(easingType) {
  96. switch (easingType) {
  97. case 1:
  98. return function(pos) {
  99. return Math.pow(pos, 2);
  100. };
  101. case 2:
  102. return function(pos) {
  103. return - (Math.pow((pos - 1), 2) - 1);
  104. };
  105. case 3:
  106. return function(pos) {
  107. if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 2);
  108. return - 0.5 * ((pos -= 2) * pos - 2);
  109. };
  110. case 4:
  111. return function(pos) {
  112. return Math.pow(pos, 3);
  113. };
  114. case 5:
  115. return function(pos) {
  116. return (Math.pow((pos - 1), 3) + 1);
  117. };
  118. case 6:
  119. return function(pos) {
  120. if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 3);
  121. return 0.5 * (Math.pow((pos - 2), 3) + 2);
  122. };
  123. case 7:
  124. return function(pos) {
  125. return Math.pow(pos, 4);
  126. };
  127. case 8:
  128. return function(pos) {
  129. return - (Math.pow((pos - 1), 4) - 1);
  130. };
  131. case 9:
  132. return function(pos) {
  133. if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 4);
  134. return - 0.5 * ((pos -= 2) * Math.pow(pos, 3) - 2);
  135. };
  136. case 10:
  137. return function(pos) {
  138. return Math.pow(pos, 5);
  139. };
  140. case 11:
  141. return function(pos) {
  142. return (Math.pow((pos - 1), 5) + 1);
  143. };
  144. case 12:
  145. return function(pos) {
  146. if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 5);
  147. return 0.5 * (Math.pow((pos - 2), 5) + 2);
  148. };
  149. case 13:
  150. return function(pos) {
  151. return - Math.cos(pos * (Math.PI / 2)) + 1;
  152. };
  153. case 14:
  154. return function(pos) {
  155. return Math.sin(pos * (Math.PI / 2));
  156. };
  157. case 15:
  158. return function(pos) {
  159. return ( - 0.5 * (Math.cos(Math.PI * pos) - 1));
  160. };
  161. case 16:
  162. return function(pos) {
  163. return (pos === 0) ? 0 : Math.pow(2, 10 * (pos - 1));
  164. };
  165. case 17:
  166. return function(pos) {
  167. return (pos === 1) ? 1 : -Math.pow(2, -10 * pos) + 1;
  168. };
  169. case 18:
  170. return function(pos) {
  171. if (pos === 0) return 0;
  172. if (pos === 1) return 1;
  173. if ((pos /= 0.5) < 1) return 0.5 * Math.pow(2, 10 * (pos - 1));
  174. return 0.5 * ( - Math.pow(2, -10 * --pos) + 2);
  175. };
  176. case 19:
  177. return function(pos) {
  178. return - (Math.sqrt(1 - (pos * pos)) - 1);
  179. };
  180. case 20:
  181. return function(pos) {
  182. return Math.sqrt(1 - Math.pow((pos - 1), 2));
  183. };
  184. case 21:
  185. return function(pos) {
  186. if ((pos /= 0.5) < 1) return - 0.5 * (Math.sqrt(1 - pos * pos) - 1);
  187. return 0.5 * (Math.sqrt(1 - (pos -= 2) * pos) + 1);
  188. };
  189. case 22:
  190. return function(pos) {
  191. if ((pos) < (1 / 2.75)) {
  192. return (7.5625 * pos * pos);
  193. } else if (pos < (2 / 2.75)) {
  194. return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
  195. } else if (pos < (2.5 / 2.75)) {
  196. return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
  197. } else {
  198. return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
  199. }
  200. };
  201. case 23:
  202. return function(pos) {
  203. var s = 1.70158;
  204. return (pos) * pos * ((s + 1) * pos - s);
  205. };
  206. case 24:
  207. return function(pos) {
  208. var s = 1.70158;
  209. return (pos = pos - 1) * pos * ((s + 1) * pos + s) + 1;
  210. };
  211. case 25:
  212. return function(pos) {
  213. var s = 1.70158;
  214. if ((pos /= 0.5) < 1) return 0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s));
  215. return 0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
  216. };
  217. case 26:
  218. return function(pos) {
  219. return - 1 * Math.pow(4, -8 * pos) * Math.sin((pos * 6 - 1) * (2 * Math.PI) / 2) + 1;
  220. };
  221. case 27:
  222. return function(pos) {
  223. var s = 1.70158;
  224. return ((pos /= 0.5) < 1) ? 0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s)) : 0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
  225. };
  226. case 28:
  227. return function(pos) {
  228. var s = 1.70158;
  229. return pos * pos * ((s + 1) * pos - s);
  230. };
  231. case 29:
  232. return function(pos) {
  233. var s = 1.70158;
  234. return (pos -= 1) * pos * ((s + 1) * pos + s) + 1;
  235. };
  236. case 30:
  237. return function(pos) {
  238. if (pos < (1 / 2.75)) {
  239. return (7.5625 * pos * pos);
  240. } else if (pos < (2 / 2.75)) {
  241. return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
  242. } else if (pos < (2.5 / 2.75)) {
  243. return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
  244. } else {
  245. return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
  246. }
  247. };
  248. case 31:
  249. return function(pos) {
  250. if (pos < (1 / 2.75)) {
  251. return (7.5625 * pos * pos);
  252. } else if (pos < (2 / 2.75)) {
  253. return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
  254. } else if (pos < (2.5 / 2.75)) {
  255. return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
  256. } else {
  257. return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
  258. }
  259. };
  260. case 32:
  261. return function(pos) {
  262. if ((pos /= 0.5) < 1) return 0.5 * Math.pow(pos, 4);
  263. return - 0.5 * ((pos -= 2) * Math.pow(pos, 3) - 2);
  264. };
  265. case 33:
  266. return function(pos) {
  267. return Math.pow(pos, 4);
  268. };
  269. case 34:
  270. return function(pos) {
  271. return Math.pow(pos, 0.25);
  272. }
  273. }
  274. }
  275. function onlyRefreshTheChartDataWithSeries(receivedSeries) {
  276. var receivedSeriesElementArr = JSON.parse(receivedSeries);
  277. for (var i = 0; i < receivedSeriesElementArr.length; i++) {
  278. var receivedSeriesData = receivedSeriesElementArr[i].data;
  279. // 获取series
  280. var chartSeries = globalChart.series[i];
  281. // 执行只刷新数据的函数
  282. chartSeries.setData(receivedSeriesData);
  283. }
  284. }
  285. //pragma mark -- setter method
  286. function setTheChartViewContentWidth(receivedWidth) {
  287. var container = document.getElementById('container'); //获得元素
  288. container.style.width = receivedWidth; //设置宽度
  289. globalChart.reflow();
  290. }
  291. function setTheChartViewContentHeight(receivedHeight) {
  292. var container = document.getElementById('container'); //获得元素
  293. container.style.height = receivedHeight; //设置高度
  294. globalChart.reflow();
  295. }
  296. function setChartSeriesHidden(hidden) {
  297. for (var i = 0; i < globalChart.series.length; i++) {
  298. var series = globalChart.series[i];
  299. if (hidden == true) {
  300. series.hide();
  301. } else {
  302. series.show();
  303. }
  304. }
  305. }
  306. function showTheSeriesElementContentWithIndex(elementIndex) {
  307. var series = globalChart.series[elementIndex];
  308. series.show();
  309. }
  310. function hideTheSeriesElementContentWithIndex(elementIndex) {
  311. var series = globalChart.series[elementIndex];
  312. series.hide();
  313. }
  314. </script>
  315. </body>
  316. </html>