YLSJ
/
jzhj2024server


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<!doctype html>
<html>
    <head>
        <meta charset="utf-8"> 
        <?php include "includelibs.php"; ?>

        <script >
            // 服务器地址  
            window.myDateStr = '20150526';
            window.myZoneStr = '1';
            window.myDateTypeStr = 'Day';
            function GetData() {
                var req = {
                    statType: 1, // 新手引导
                    dateType: window.myDateTypeStr,
                    dateIndex: window.myDateStr,
                    zoneid: window.myZoneStr
                };
                $.ajax({
                    type: "post",
                    url: API,
                    data: JSON.stringify(req),
                    dataType: 'JSON',
                    contentType: 'application/json',
                    processData: false,
                    success: function (resp) {
                        RenderData(resp);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("err:" + XMLHttpRequest.status + XMLHttpRequest.readyState + XMLHttpRequest.responseText);
                    }
                });
            }
            ;

            $(function () {
                var myDatePicker = $("#datepicker");
                var zoneSelect = $("#zoneid");
                var timeSpan = $("#timeSpan");

                myDatePicker.datepicker({
                    onSelect: function (dateText, inst) {
                        window.myDateStr = dateText;
                        GetData();
                    }
                });
                myDatePicker.datepicker('option', {dateFormat: 'yymmdd'});
                myDatePicker.datepicker('option', {defaultDate: +2});

                zoneSelect.selectmenu({
                    change: function (event, data) {
                        window.myZoneStr = data.item.value;
                        GetData();
                    }
                });
                timeSpan.selectmenu({
                    change: function (event, data) {
                        window.myDateTypeStr = data.item.value;
                        GetData();
                    }
                });
            });

            function RenderData(respData) {
                //Get the context of the canvas element we want to select  
                $("#myChart").remove();
                $("#chartContainer").append('<canvas id="myChart"  style="width:800px;height:400px;border: 1px solid red;"></canvas>');
                ctx = document.getElementById("myChart").getContext("2d");
                var totalNewUser = 0;
                var i = $.inArray(-1, respData.labels);
                if (i > -1) {
                    var dat = respData.datasets[0].data;
                    totalNewUser = dat[i];
                    dat[i] = 0;
                    respData.datasets[0].data = dat;
                }
                new Chart(ctx, {
                    type: 'bar',
                    data: respData,
                    options: {
                        // Elements options apply to all of the options unless overridden in a dataset
                        // In this case, we are setting the border of each bar to be 2px wide and green
                        animation: false,
                        elements: {
                            rectangle: {
                                borderWidth: 2,
                                borderColor: 'rgb(0, 255, 0)',
                                borderSkipped: 'bottom'
                            }
                        },
                        responsive: true,
                        legend: {
                            position: 'top',
                            scale: 1
                        },
                        title: {
                            display: true,
                            text: window.myDateStr + '当' + window.myDateTypeStr + '流失分析图(' + window.myZoneStr + '区)' + (window.myZoneStr === '1' ? ', 总流量:' + totalNewUser + '个新用户' : '')
                        }
                    }
                });

            }
        </script>
    </head>
    <body style='max-width:800px;margin:auto;'> 
        <form action="#">
            <p>选择日期: <input type="text" id="datepicker"/></p>
            <fieldset>
                <label for="zone">选择分区</label>
                <select name="zoneid" id="zoneid">      
                    <option selected="selected">1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>	  
                    <option>12</option>
                    <option>13</option>	  
                    <option>14</option>
                    <option>999</option>
                </select>
            </fieldset> 
            <fieldset>
                <label for="dateType">选择时间跨度</label>
                <select name="timeSpan" id="timeSpan">      
                    <option selected="selected">Day</option>
                    <option>Week</option>
                    <option>Month</option>
                </select>
            </fieldset> 
        </form>
        <div id="chartContainer" style="max-width:800px;max-height:400px">
            <canvas id="myChart"  style="width:800px;height:400px;border: 1px solid red;"></canvas>
        </div>

        说明:
        <ul>
            <li>第-2步骤: 注册新用户</li>
            <li>第-1步骤: 玩家第一次登录(未建分区之前,别的区里面没有-1这个值)</li>
            <li>第2-8步骤:  购买兽蛋</li>
            <li>第8-10步骤:  加速孵化兽蛋</li>
            <li>第10-13步骤:  放置兽蛋</li>
            <li>第13-17步骤:  购买农场</li>
            <li>第17-19步骤:  种植食物</li>
            <li>第20-21步骤:  农场加速</li>
            <li>第22-22步骤:  农场收获食物</li>
            <li>第23-28步骤:  喂养神兽</li>
            <li>第29-35步骤:  培育神兽</li>
            <li>第36-37步骤:  加速培育</li>
            <li>第38-38步骤:  收集培育的兽蛋</li>
            <li>第38-40步骤:  打开任务界面</li>
            <li>第40-42步骤:  结束引导</li>
            <li>第100-100步骤:  领取七星奖励</li>
            <li>第110步骤:  领取任务奖励:收取金币</li>
            <li>第120步骤:  领取任务奖励:种植一次千灵花</li>
            <li>第130步骤:  领取任务奖励:收获一次食物</li>
            <li>第140步骤:  领取任务奖励:购买第二个农场</li>
            <li>第150步骤:  领取任务奖励:铲除2个碎石</li>
            <li>第155步骤:  领取任务奖励:建造图鉴雕像</li>
            <li>第160步骤:  领取任务奖励:建造水系领地</li>
            <li>第170步骤:  领取任务奖励:购买一只水灵兽</li>
            <li>第180步骤:  领取任务奖励:加速孵化水灵兽</li>
            <li>第190步骤:  领取任务奖励:放置水灵兽</li>
        </ul> 
    </body>
</html>