server/Gameserver/Public/gamesys/home/pages/retention/retention.js

$('.form_date').datetimepicker({
    language: 'zh-CN',
    weekStart: 1,
    todayBtn: 1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
});

var chart = null;
var chart2 = null;
var chart3 = null;


function Canvas(datas, datas2) {
    var lineChartData = {
        labels: ["当天注册人数", "次日留存人数", "3日留存人数", "5日留存人数", "7日留存人数", "15日留存人数", "30日留存人数"],
        datasets: [
            {
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "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).Bar(lineChartData);



    var lineChartData2 = {
        labels: ["次日留存率", "3日留存率", "5日留存率", "7日留存率", "15日留存率", "30日留存率"],
        datasets: [
            {
			fillColor : "rgba(151,187,205,0.5)",
			strokeColor : "rgba(151,187,205,1)",
                data: datas2
            },
        ]
    }
    $('#day2Canvas').attr("width", $('#day2CanvasParent').width());
    var ctx2 = document.getElementById("day2Canvas").getContext("2d");
    if (chart2 != null) {
        chart2.destroy();
    }
    chart2 = new Chart(ctx2).Bar(lineChartData2,{
        scaleLabel: "<%=value%>%"
    });
}

function searchDay() {
    var date = $("#date-text").val();
    $.post(
            getProviderUrl("retention"),
            {date: date},
            function (data) {
                Canvas(data.data1, data.data2);
            }
    , 'json');
}

function searchDays(type) {
    var date1 = $("#date-text1").val();
    var date2 = $("#date-text2").val();
    $.post(
            getProviderUrl("retention2"),
            {date1: date1,date2: date2,type:type},
            function (data) {
                Canvas2(data.data, data.labels,type);
            }
    , 'json');
}

function Canvas2(datas, labels,type) {
    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
            },
        ]
    }
    $('#daysCanvas').attr("width", $('#daysCanvasParent').width());
    var ctx = document.getElementById("daysCanvas").getContext("2d");
    if (chart3 != null) {
        chart3.destroy();
    }
    if(type == 0){
        chart3 = new Chart(ctx).Line(lineChartData);
    }
    else
    {
        chart3 = new Chart(ctx).Line(lineChartData,{
        scaleLabel: "<%=value%>%"
    });
    }

}