|
@@ -1,108 +1,113 @@
|
|
|
Date.prototype.format = function(format) {
|
|
|
- var date = {
|
|
|
- "M+": this.getMonth() + 1,
|
|
|
- "d+": this.getDate(),
|
|
|
- "h+": this.getHours(),
|
|
|
- "m+": this.getMinutes(),
|
|
|
- "s+": this.getSeconds(),
|
|
|
- "q+": Math.floor((this.getMonth() + 3) / 3),
|
|
|
- "S+": this.getMilliseconds()
|
|
|
- };
|
|
|
- if (/(y+)/i.test(format)) {
|
|
|
- format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
- }
|
|
|
- for (var k in date) {
|
|
|
- if (new RegExp("(" + k + ")").test(format)) {
|
|
|
- format = format.replace(RegExp.$1, RegExp.$1.length == 1
|
|
|
- ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
|
|
|
- }
|
|
|
- }
|
|
|
- return format;
|
|
|
-}
|
|
|
+ var date = {
|
|
|
+ "M+": this.getMonth() + 1,
|
|
|
+ "d+": this.getDate(),
|
|
|
+ "h+": this.getHours(),
|
|
|
+ "m+": this.getMinutes(),
|
|
|
+ "s+": this.getSeconds(),
|
|
|
+ "q+": Math.floor((this.getMonth() + 3) / 3),
|
|
|
+ "S+": this.getMilliseconds()
|
|
|
+ };
|
|
|
+ if (/(y+)/i.test(format)) {
|
|
|
+ format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
+ }
|
|
|
+ for (var k in date) {
|
|
|
+ if (new RegExp("(" + k + ")").test(format)) {
|
|
|
+ format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
|
|
|
+ date[k] : ("00" + date[k]).substr(("" + date[k]).length));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return format;
|
|
|
+}
|
|
|
|
|
|
-$(function(){
|
|
|
- var date = new Date();
|
|
|
- date.setDate(date.getDate()-1);
|
|
|
- $('#date-text').val(date.format("yyyy-MM-dd"));
|
|
|
- searchDay();
|
|
|
+$(function() {
|
|
|
+ var date = new Date();
|
|
|
+ date.setDate(date.getDate() - 1);
|
|
|
+ $('#date-text').val(date.format("yyyy-MM-dd"));
|
|
|
+ searchDay();
|
|
|
});
|
|
|
|
|
|
|
|
|
$('.form_date').datetimepicker({
|
|
|
- language: 'zh-CN',
|
|
|
- weekStart: 1,
|
|
|
- todayBtn: 1,
|
|
|
- autoclose: 1,
|
|
|
- todayHighlight: 1,
|
|
|
- startView: 2,
|
|
|
- minView: 2,
|
|
|
- forceParse: 0
|
|
|
+ language: 'zh-CN',
|
|
|
+ weekStart: 1,
|
|
|
+ todayBtn: 1,
|
|
|
+ autoclose: 1,
|
|
|
+ todayHighlight: 1,
|
|
|
+ startView: 2,
|
|
|
+ minView: 2,
|
|
|
+ forceParse: 0
|
|
|
});
|
|
|
|
|
|
var chart = null;
|
|
|
var chart2 = null;
|
|
|
|
|
|
function Canvas(datas) {
|
|
|
- var labels = ['新手引导'];
|
|
|
- var datas2 = [0];
|
|
|
- for (var i = 1; i < datas.length; i++) {
|
|
|
- labels.push('第' + i + '关');
|
|
|
- datas2.push(((datas[i - 1] - datas[i]) / datas[i - 1] *100).toFixed(2));
|
|
|
- }
|
|
|
- var lineChartData = {
|
|
|
- labels: labels,
|
|
|
- datasets: [
|
|
|
- {
|
|
|
- fillColor: "rgba(220,220,220,0.2)",
|
|
|
- strokeColor: "rgba(220,220,220,1)",
|
|
|
- pointColor: "rgba(220,220,220,1)",
|
|
|
- pointStrokeColor: "#fff",
|
|
|
- pointHighlightFill: "#fff",
|
|
|
- pointHighlightStroke: "rgba(220,220,220,1)",
|
|
|
- data: datas
|
|
|
- },
|
|
|
- ]
|
|
|
- }
|
|
|
- $('#dayCanvas').attr("width", $('#dayCanvasParent').width());
|
|
|
- var ctx = document.getElementById("dayCanvas").getContext("2d");
|
|
|
- if (chart != null) {
|
|
|
- chart.destroy();
|
|
|
- }
|
|
|
- chart = new Chart(ctx).Line(lineChartData, {
|
|
|
- scaleLabel: "<%=value%>人"
|
|
|
- });
|
|
|
+ var labels = ['新手引导'];
|
|
|
+ var datas2 = [0];
|
|
|
+ var keys =Object.keys(datas);
|
|
|
+
|
|
|
+ // console.log(keys.length);
|
|
|
+ keys.sort();
|
|
|
+ for (var i = 1; i < keys.length; i++) {
|
|
|
+ var k = keys[i];
|
|
|
+ labels.push('第' + k + '关');
|
|
|
+ var kf = keys[i-1];
|
|
|
+ datas2.push(((datas[kf] - datas[k]) / datas[kf] * 100).toFixed(2));
|
|
|
+ }
|
|
|
+ // console.log(labels);
|
|
|
+ var lineChartData = {
|
|
|
+ labels: labels,
|
|
|
+ datasets: [{
|
|
|
+ fillColor: "rgba(220,220,220,0.2)",
|
|
|
+ strokeColor: "rgba(220,220,220,1)",
|
|
|
+ pointColor: "rgba(220,220,220,1)",
|
|
|
+ pointStrokeColor: "#fff",
|
|
|
+ pointHighlightFill: "#fff",
|
|
|
+ pointHighlightStroke: "rgba(220,220,220,1)",
|
|
|
+ data: datas
|
|
|
+ }, ]
|
|
|
+ }
|
|
|
+ $('#dayCanvas').attr("width", $('#dayCanvasParent').width());
|
|
|
+ var ctx = document.getElementById("dayCanvas").getContext("2d");
|
|
|
+ if (chart != null) {
|
|
|
+ chart.destroy();
|
|
|
+ }
|
|
|
+ chart = new Chart(ctx).Line(lineChartData, {
|
|
|
+ scaleLabel: "<%=value%>人"
|
|
|
+ });
|
|
|
|
|
|
- var lineChartData2 = {
|
|
|
- labels: labels,
|
|
|
- datasets: [
|
|
|
- {
|
|
|
- fillColor: "rgba(151,187,205,0.5)",
|
|
|
- strokeColor: "rgba(151,187,205,1)",
|
|
|
- pointColor: "rgba(151,187,205,1)",
|
|
|
- pointStrokeColor: "#fff",
|
|
|
- pointHighlightFill: "#fff",
|
|
|
- pointHighlightStroke: "rgba(220,220,220,1)",
|
|
|
- data: datas2
|
|
|
- },
|
|
|
- ]
|
|
|
- }
|
|
|
- $('#day2Canvas').attr("width", $('#day2CanvasParent').width());
|
|
|
- var ctx2 = document.getElementById("day2Canvas").getContext("2d");
|
|
|
- if (chart2 != null) {
|
|
|
- chart2.destroy();
|
|
|
- }
|
|
|
- chart2 = new Chart(ctx2).Line(lineChartData2, {
|
|
|
- scaleLabel: "<%=value%>%"
|
|
|
- });
|
|
|
+ // console.log(datas2);
|
|
|
+ var lineChartData2 = {
|
|
|
+ labels: labels,
|
|
|
+ datasets: [{
|
|
|
+ fillColor: "rgba(151,187,205,0.5)",
|
|
|
+ strokeColor: "rgba(151,187,205,1)",
|
|
|
+ pointColor: "rgba(151,187,205,1)",
|
|
|
+ pointStrokeColor: "#fff",
|
|
|
+ pointHighlightFill: "#fff",
|
|
|
+ pointHighlightStroke: "rgba(220,220,220,1)",
|
|
|
+ data: datas2
|
|
|
+ }, ]
|
|
|
+ }
|
|
|
+ $('#day2Canvas').attr("width", $('#day2CanvasParent').width());
|
|
|
+ var ctx2 = document.getElementById("day2Canvas").getContext("2d");
|
|
|
+ if (chart2 != null) {
|
|
|
+ chart2.destroy();
|
|
|
+ }
|
|
|
+ chart2 = new Chart(ctx2).Line(lineChartData2, {
|
|
|
+ scaleLabel: "<%=value%>%"
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
function searchDay() {
|
|
|
- var date = $("#date-text").val();
|
|
|
- $.post(
|
|
|
- getProviderUrl("level"),
|
|
|
- {date: date},
|
|
|
- function (data) {
|
|
|
- Canvas(data.datas);
|
|
|
- }
|
|
|
- , 'json');
|
|
|
+ var date = $("#date-text").val();
|
|
|
+ $.post(
|
|
|
+ getProviderUrl("level"), {
|
|
|
+ date: date
|
|
|
+ },
|
|
|
+ function(data) {
|
|
|
+ // console.log(data);
|
|
|
+ Canvas(data.datas);
|
|
|
+ }, 'json');
|
|
|
}
|