level.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. Date.prototype.format = function(format) {
  2. var date = {
  3. "M+": this.getMonth() + 1,
  4. "d+": this.getDate(),
  5. "h+": this.getHours(),
  6. "m+": this.getMinutes(),
  7. "s+": this.getSeconds(),
  8. "q+": Math.floor((this.getMonth() + 3) / 3),
  9. "S+": this.getMilliseconds()
  10. };
  11. if (/(y+)/i.test(format)) {
  12. format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
  13. }
  14. for (var k in date) {
  15. if (new RegExp("(" + k + ")").test(format)) {
  16. format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
  17. date[k] : ("00" + date[k]).substr(("" + date[k]).length));
  18. }
  19. }
  20. return format;
  21. }
  22. $(function() {
  23. var date = new Date();
  24. date.setDate(date.getDate() - 1);
  25. $('#date-text').val(date.format("yyyy-MM-dd"));
  26. searchDay();
  27. });
  28. $('.form_date').datetimepicker({
  29. language: 'zh-CN',
  30. weekStart: 1,
  31. todayBtn: 1,
  32. autoclose: 1,
  33. todayHighlight: 1,
  34. startView: 2,
  35. minView: 2,
  36. forceParse: 0
  37. });
  38. var chart = null;
  39. var chart2 = null;
  40. function Canvas(datas) {
  41. var labels = ['新手引导'];
  42. var datas2 = [0];
  43. var keys =Object.keys(datas);
  44. // console.log(keys.length);
  45. keys.sort();
  46. for (var i = 1; i < keys.length; i++) {
  47. var k = keys[i];
  48. labels.push('第' + k + '关');
  49. var kf = keys[i-1];
  50. datas2.push(((datas[kf] - datas[k]) / datas[kf] * 100).toFixed(2));
  51. }
  52. // console.log(labels);
  53. var lineChartData = {
  54. labels: labels,
  55. datasets: [{
  56. fillColor: "rgba(220,220,220,0.2)",
  57. strokeColor: "rgba(220,220,220,1)",
  58. pointColor: "rgba(220,220,220,1)",
  59. pointStrokeColor: "#fff",
  60. pointHighlightFill: "#fff",
  61. pointHighlightStroke: "rgba(220,220,220,1)",
  62. data: datas
  63. }, ]
  64. }
  65. $('#dayCanvas').attr("width", $('#dayCanvasParent').width());
  66. var ctx = document.getElementById("dayCanvas").getContext("2d");
  67. if (chart != null) {
  68. chart.destroy();
  69. }
  70. chart = new Chart(ctx).Line(lineChartData, {
  71. scaleLabel: "<%=value%>人"
  72. });
  73. // console.log(datas2);
  74. var lineChartData2 = {
  75. labels: labels,
  76. datasets: [{
  77. fillColor: "rgba(151,187,205,0.5)",
  78. strokeColor: "rgba(151,187,205,1)",
  79. pointColor: "rgba(151,187,205,1)",
  80. pointStrokeColor: "#fff",
  81. pointHighlightFill: "#fff",
  82. pointHighlightStroke: "rgba(220,220,220,1)",
  83. data: datas2
  84. }, ]
  85. }
  86. $('#day2Canvas').attr("width", $('#day2CanvasParent').width());
  87. var ctx2 = document.getElementById("day2Canvas").getContext("2d");
  88. if (chart2 != null) {
  89. chart2.destroy();
  90. }
  91. chart2 = new Chart(ctx2).Line(lineChartData2, {
  92. scaleLabel: "<%=value%>%"
  93. });
  94. }
  95. function searchDay() {
  96. var date = $("#date-text").val();
  97. $.post(
  98. getProviderUrl("level"), {
  99. date: date
  100. },
  101. function(data) {
  102. // console.log(data);
  103. Canvas(data.datas);
  104. }, 'json');
  105. }