server/Gameserver/Public/BackOffice/statis/libs/statis.js

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
 
var host = document.domain; // 或 window.localtion.host
var API = 'http://' + host + '/PetMulti/Gameserver/Amfphp/Services/StatServer.php';

window.myDateStr = '20150526';
window.myZoneStr = '1';

// 请求数据
function GetData(statType) {
    var req = {
        statType: statType,
        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, getTitleText);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("err:" + XMLHttpRequest.status + XMLHttpRequest.readyState + XMLHttpRequest.responseText);
        }
    });
}
// 渲染
function RenderData(respData, getTitleText) {
    //Get the context of the canvas element we want to select  
    $("#myChart").remove();
    $("#chartContainer").append('<canvas id="myChart"  style="width:100%;height:100%;border: 1px solid red;"></canvas>');
    ctx = document.getElementById("myChart").getContext("2d");
    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,
            scaleIntegersOnly: true,
            legend: {
                position: 'top',
                scale: 1
            },
            title: {
                display: true,
                text: getTitleText()
            }
        }
    });            

}