enchart.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. var chart;
  2. var consumptionData = [
  3. {
  4. "date": "7/1",
  5. "value":Math.random(),
  6. "target":0.6,
  7. "color": "#FF0F00"
  8. },
  9. {
  10. "date": "7/3",
  11. "value": Math.random(),
  12. "target":0.6,
  13. "color": "#FF6600"
  14. },
  15. {
  16. "date": "7/5",
  17. "value": Math.random(),
  18. "target":0.6,
  19. "color": "#FF9E01"
  20. },
  21. {
  22. "date": "7/7",
  23. "value": Math.random(),
  24. "target":0.6,
  25. "color": "#FCD202"
  26. },
  27. {
  28. "date": "7/9",
  29. "value":Math.random(),
  30. "target":0.6,
  31. "color": "#F8FF01"
  32. },
  33. {
  34. "date": "7/13",
  35. "value": Math.random(),
  36. "target":0.6,
  37. "color": "#B0DE09"
  38. },
  39. {
  40. "date": "7/17",
  41. "value": Math.random(),
  42. "target":0.6,
  43. "color": "#04D215"
  44. },
  45. {
  46. "date": "7/19",
  47. "value": Math.random(),
  48. "target":0.6,
  49. "color": "#0D8ECF"
  50. },
  51. {
  52. "date": "7/23",
  53. "value": Math.random(),
  54. "target":0.6,
  55. "color": "#0D52D1"
  56. },
  57. {
  58. "date": "7/25",
  59. "value": Math.random(),
  60. "target":0.6,
  61. "color": "#2A0CD0"
  62. },
  63. {
  64. "date": "7/27",
  65. "value": Math.random(),
  66. "target":0.6,
  67. "color": "#8A0CCF"
  68. },
  69. {
  70. "date": "7/29",
  71. "value": Math.random(),
  72. "target":0.6,
  73. "color": "#CD0D74"
  74. }
  75. ];
  76. AmCharts.ready(function () {
  77. // SERIAL CHART
  78. chart = new AmCharts.AmSerialChart();
  79. chart.dataProvider = consumptionData;
  80. chart.categoryField = "date";
  81. chart.startDuration = 1;
  82. // AXES
  83. // category
  84. var categoryAxis = chart.categoryAxis;
  85. categoryAxis.labelRotation = 45; // this line makes category values to be rotated
  86. categoryAxis.gridPosition = "start";
  87. // GRAPH
  88. var graph = new AmCharts.AmGraph();
  89. graph.valueField = "value";
  90. graph.colorField = "color";
  91. graph.balloonText = "<b>[[category]]: [[value]]</b>";
  92. graph.type = "column";
  93. graph.lineAlpha = 0;
  94. graph.fillAlphas = 1;
  95. chart.addGraph(graph);
  96. // line
  97. var graph2 = new AmCharts.AmGraph();
  98. graph2.type = "line";
  99. graph2.title = "目标";
  100. graph2.lineColor = "#fcd202";
  101. graph2.valueField = "target";
  102. graph2.lineThickness = 3;
  103. graph2.bullet = "round";
  104. graph2.bulletBorderThickness = 3;
  105. graph2.bulletBorderColor = "#fcd202";
  106. graph2.bulletBorderAlpha = 1;
  107. graph2.bulletColor = "#ffffff";
  108. graph2.dashLengthField = "dashLengthLine";
  109. graph2.balloonText = "<span style='font-size:13px;'>目标:<b>[[value]]</b> [[additional]]</span>";
  110. chart.addGraph(graph2);
  111. // CURSOR
  112. var chartCursor = new AmCharts.ChartCursor();
  113. chartCursor.cursorAlpha = 0;
  114. chartCursor.zoomable = false;
  115. chartCursor.categoryBalloonEnabled = false;
  116. chart.addChartCursor(chartCursor);
  117. chart.creditsPosition = "top-right";
  118. chart.write("consumptiondiv");
  119. });
  120. var conditionerData = [
  121. {
  122. "date": "7/5",
  123. "income": Math.ceil(Math.random()*80),
  124. "expenses": Math.ceil(Math.random()*80)
  125. },
  126. {
  127. "date": "7/10",
  128. "income": Math.ceil(Math.random()*80),
  129. "expenses": Math.ceil(Math.random()*80)
  130. },
  131. {
  132. "date": "7/15",
  133. "income": Math.ceil(Math.random()*80),
  134. "expenses": Math.ceil(Math.random()*80)
  135. },
  136. {
  137. "date": "7/20",
  138. "income": Math.ceil(Math.random()*80),
  139. "expenses": Math.ceil(Math.random()*80)
  140. },
  141. {
  142. "date": "7/25",
  143. "income": Math.ceil(Math.random()*80),
  144. "expenses": Math.ceil(Math.random()*80)
  145. }
  146. ];
  147. AmCharts.ready(function () {
  148. // SERIAL CHART
  149. chart = new AmCharts.AmSerialChart();
  150. chart.dataProvider = conditionerData;
  151. chart.categoryField = "date";
  152. chart.startDuration = 1;
  153. chart.plotAreaBorderColor = "#DADADA";
  154. chart.plotAreaBorderAlpha = 1;
  155. // AXES
  156. // Category
  157. var categoryAxis = chart.categoryAxis;
  158. categoryAxis.gridPosition = "start";
  159. categoryAxis.gridAlpha = 0.1;
  160. categoryAxis.axisAlpha = 0;
  161. // Value
  162. var valueAxis = new AmCharts.ValueAxis();
  163. valueAxis.axisAlpha = 0;
  164. valueAxis.gridAlpha = 0.1;
  165. valueAxis.position = "top";
  166. chart.addValueAxis(valueAxis);
  167. // GRAPHS
  168. // first graph
  169. var graph1 = new AmCharts.AmGraph();
  170. graph1.type = "column";
  171. graph1.title = "Income";
  172. graph1.valueField = "income";
  173. graph1.balloonText = "当前:[[value]]";
  174. graph1.lineAlpha = 0;
  175. graph1.fillColors = "#ADD981";
  176. graph1.fillAlphas = 1;
  177. chart.addGraph(graph1);
  178. // second graph
  179. var graph2 = new AmCharts.AmGraph();
  180. graph2.type = "column";
  181. graph2.title = "Expenses";
  182. graph2.valueField = "expenses";
  183. graph2.balloonText = "历史:[[value]]";
  184. graph2.lineAlpha = 0;
  185. graph2.fillColors = "#81acd9";
  186. graph2.fillAlphas = 1;
  187. chart.addGraph(graph2);
  188. chart.creditsPosition = "top-right";
  189. // WRITE
  190. chart.write("conditionerdiv");
  191. });
  192. var EERData = [
  193. {
  194. "year": '1月',
  195. "income": Math.ceil(Math.random()*80),
  196. "expenses": 35
  197. },
  198. {
  199. "year": '3月',
  200. "income": Math.ceil(Math.random()*80),
  201. "expenses": 35
  202. },
  203. {
  204. "year": '6月',
  205. "income": Math.ceil(Math.random()*80),
  206. "expenses": 35
  207. },
  208. {
  209. "year": '9月',
  210. "income": Math.ceil(Math.random()*80),
  211. "expenses": 35
  212. },
  213. {
  214. "year": '11月',
  215. "income": Math.ceil(Math.random()*80),
  216. "expenses": 35
  217. },
  218. {
  219. "year": '12月',
  220. "income": Math.ceil(Math.random()*80),
  221. "expenses": 35
  222. }
  223. ];
  224. AmCharts.ready(function () {
  225. // SERIAL CHART
  226. chart = new AmCharts.AmSerialChart();
  227. chart.path = "../amcharts/";
  228. chart.dataProvider = EERData;
  229. chart.categoryField = "year";
  230. chart.startDuration = 1;
  231. chart.handDrawn = true;
  232. chart.handDrawnScatter = 3;
  233. // AXES
  234. // category
  235. var categoryAxis = chart.categoryAxis;
  236. categoryAxis.gridPosition = "start";
  237. // value
  238. var valueAxis = new AmCharts.ValueAxis();
  239. valueAxis.axisAlpha = 0;
  240. chart.addValueAxis(valueAxis);
  241. // GRAPHS
  242. // column graph
  243. var graph1 = new AmCharts.AmGraph();
  244. graph1.type = "column";
  245. graph1.title = "Income";
  246. graph1.lineColor = "#a668d5";
  247. graph1.valueField = "income";
  248. graph1.lineAlpha = 1;
  249. graph1.fillAlphas = 1;
  250. graph1.alphaField = "alpha";
  251. graph1.balloonText = "<span style='font-size:13px;'>当前 :<b>[[value]]</b> [[additional]]</span>";
  252. chart.addGraph(graph1);
  253. // line
  254. var graph2 = new AmCharts.AmGraph();
  255. graph2.type = "line";
  256. graph2.title = "Expenses";
  257. graph2.lineColor = "#fcd202";
  258. graph2.valueField = "expenses";
  259. graph2.lineThickness = 3;
  260. graph2.bullet = "round";
  261. graph2.bulletBorderThickness = 3;
  262. graph2.bulletBorderColor = "#fcd202";
  263. graph2.bulletBorderAlpha = 1;
  264. graph2.bulletColor = "#ffffff";
  265. graph2.dashLengthField = "dashLengthLine";
  266. graph2.balloonText = "<span style='font-size:13px;'>目标 :<b>[[value]]</b> [[additional]]</span>";
  267. chart.addGraph(graph2);
  268. // WRITE
  269. chart.write("EERdiv");
  270. });
  271. var refrigerationData = [
  272. {
  273. "year": "7/3",
  274. "value": 2
  275. },
  276. {
  277. "year": "7/5",
  278. "value": 2.5
  279. },
  280. {
  281. "year": "7/15",
  282. "value": 1.5
  283. },
  284. {
  285. "year": "7/20",
  286. "value": 5
  287. },
  288. {
  289. "year": "7/25",
  290. "value": 8
  291. },
  292. {
  293. "year": "7/29",
  294. "value": 2
  295. }
  296. ];
  297. AmCharts.ready(function () {
  298. // SERIAL CHART
  299. chart = new AmCharts.AmSerialChart();
  300. chart.path = getRootPath()+"/assets/amcharts/";
  301. chart.pathToImages=getRootPath()+"/assets/amcharts/images/";
  302. chart.dataProvider = refrigerationData;
  303. chart.marginLeft = 10;
  304. chart.categoryField = "year";
  305. chart.dataDateFormat = "M/DD";
  306. // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
  307. chart.addListener("dataUpdated", zoomChart);
  308. // AXES
  309. // category
  310. var categoryAxis = chart.categoryAxis;
  311. categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
  312. categoryAxis.minPeriod = "DD"; // our data is yearly, so we set minPeriod to YYYY
  313. categoryAxis.dashLength = 3;
  314. categoryAxis.minorGridEnabled = true;
  315. categoryAxis.minorGridAlpha = 0.1;
  316. // value
  317. var valueAxis = new AmCharts.ValueAxis();
  318. valueAxis.axisAlpha = 0;
  319. valueAxis.inside = true;
  320. valueAxis.dashLength = 3;
  321. chart.addValueAxis(valueAxis);
  322. // GRAPH
  323. graph = new AmCharts.AmGraph();
  324. graph.type = "smoothedLine"; // this line makes the graph smoothed line.
  325. graph.lineColor = "#d1655d";
  326. graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
  327. graph.bullet = "round";
  328. graph.bulletSize = 8;
  329. graph.bulletBorderColor = "#FFFFFF";
  330. graph.bulletBorderAlpha = 1;
  331. graph.bulletBorderThickness = 2;
  332. graph.lineThickness = 2;
  333. graph.valueField = "value";
  334. graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
  335. chart.addGraph(graph);
  336. // CURSOR
  337. var chartCursor = new AmCharts.ChartCursor();
  338. chartCursor.cursorAlpha = 0;
  339. chartCursor.cursorPosition = "mouse";
  340. chartCursor.categoryBalloonDateFormat = "YYYY-W";
  341. chart.addChartCursor(chartCursor);
  342. // SCROLLBAR
  343. var chartScrollbar = new AmCharts.ChartScrollbar();
  344. chart.addChartScrollbar(chartScrollbar);
  345. chart.creditsPosition = "bottom-right";
  346. // WRITE
  347. chart.write("refrigerationdiv");
  348. });
  349. // this method is called when chart is first inited as we listen for "dataUpdated" event
  350. function zoomChart() {
  351. // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
  352. chart.zoomToDates(new Date(1972, 0), new Date(1984, 0));
  353. }
  354. //js获取项目根路径,如:http://localhost:8099/UniqueduHome
  355. function getRootPath(){
  356. //获取当前网址,如: http://localhost:8099/UniqueduHome/view/error/notAuthorize.jsp
  357. var curWwwPath=window.document.location.href;
  358. //获取主机地址之后的目录,如: UniqueduHome/view/error/notAuthorize.jsp
  359. var pathName=window.document.location.pathname;
  360. var pos=curWwwPath.indexOf(pathName);
  361. //获取主机地址,如: http://localhost:8099
  362. var localhostPaht=curWwwPath.substring(0,pos);
  363. //获取带"/"的项目名,如:/UniqueduHome
  364. var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
  365. return(localhostPaht+projectName);
  366. }