Ошибка отображения диаграммы при использовании lib Primefaces на мобильном телефоне

0

Я программирую веб-сайт для мобильного использования jsf. В моем коде я использую lib primefaces mobile, вся информация хорошо отображается на мобильных устройствах. Но диаграмма показывает неправильный размер на мобильном телефоне, размер диаграммы больше размера мобильного экрана. когда вы поворачиваете телефон по горизонтали, дело было включено. Я не знаю, как правильно отображать диаграмму на экране мобильного телефона. Mycode

<f:view xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:pm="http://primefaces.org/mobile"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    contentType="text/html"
    renderKitId="PRIMEFACES_MOBILE">

<f:metadata>
    <f:event type="preRenderView" listener="#{MobileTrafficBean.onLoad}"/>
</f:metadata>

<pm:page title="Lưu lượng">
    <pm:view id="viewA">
        <pm:header title="Hiện tại" swatch="b">
            <f:facet name="left">
                <p:button value="Back" icon="back" href="/mobile/vdc_list.html"/>
            </f:facet>
            <f:facet name="right">
                <pm:buttonGroup orientation="horizontal">
                    <p:button value="Option" icon="gear" onclick="dlgTuyChon.show();"/>
                    <p:button value="Logout" icon="arrow-r" href="/mobile/logout.html"/>
                </pm:buttonGroup>
            </f:facet>
        </pm:header>
        <pm:content>

            <pm:navBar>
                <p:button value="Hiện tại"
                        href="/mobile/chart_real_time.html" styleClass="ui-btn-active"/>
                <p:button value="Ngày"
                          href="/mobile/chart_report_date.html"/>
                <p:button value="Tháng"
                          href="/mobile/chart_report_month.html"/>
            </pm:navBar>

            <link href="#{request.contextPath}/resources/css/rickshaw.min.css" rel="stylesheet" type="text/css"/>
            <link href="#{request.contextPath}/resources/css/netflow-chart.css" rel="stylesheet" type="text/css"/>
            <script src="#{request.contextPath}/resources/js/d3.min.js" type="text/javascript"></script>
            <script src="#{request.contextPath}/resources/js/d3.layout.min.js" type="text/javascript"></script>
            <script src="#{request.contextPath}/resources/js/rickshaw.js" type="text/javascript"></script>

            <p:messages id="messages" showDetail="true" showSummary="false" closable="true" autoUpdate="true"/>
            <h:form prependId="false">
                <h3 class="chartTitle">
                    IN <p:graphicImage value="/resources/images/blue.jpg"/>
                    OUT <p:graphicImage value="/resources/images/red.jpg"/>
                </h3>
                <div id="in-chart-container" class="chart-container" style="width: 400px; margin-top: 10px;">
                    <div id="in-chart" class="chart"></div>
                    <div id="in-chart-y-axis" class="y-axis"></div>
                    <div class="legend_container">
                        <div class="smoother" title="Smoothing"></div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <h:inputHidden id="nodeId" value="#{MobileTrafficBean.selectedNodeId}"/>
            </h:form>

            <p:dialog id="dialog" header="Tùy chọn" widgetVar="dlgTuyChon" modal="true" draggable="false" closable="true"
                      resizable="false" showHeader="false">
                <div id="in-legend" style="margin-left:18px;"></div>
            </p:dialog>
                ***<script src="#{request.contextPath}/resources/js/netflow.js" type="text/javascript"></script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        lv.netflow.chartPool.config({
                            nodeIdName: "#nodeId",
                            //urlUpdateData: 'http://103.27.236.20:8080/analyzer/getDataRealTime',
                            urlUpdateData: 'http://192.168.65.121:8080/analyzer/getDataRealTime',
                            viewType: lv.netflow.CHART_TYPE.RUNTIME
                        });
                        lv.netflow.chartPool.addChart([
                            {
                                chartId: "#in-chart",
                                yAxisId: "#in-chart-y-axis",
                                legend: "in-legend"
                            }
                        ]);
                        lv.netflow.chartPool.drawAll();
                        lv.netflow.chartPool.startAll();
                    });
                </script>***
        </pm:content>
    </pm:view>
</pm:page>

Кодовая диаграмма javascript

***<script src="#{request.contextPath}/resources/js/netflow.js" type="text/javascript"></script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        lv.netflow.chartPool.config({
                            nodeIdName: "#nodeId",
                            //urlUpdateData: 'http://103.27.236.20:8080/analyzer/getDataRealTime',
                            urlUpdateData: 'http://192.168.65.121:8080/analyzer/getDataRealTime',
                            viewType: lv.netflow.CHART_TYPE.RUNTIME
                        });
                        lv.netflow.chartPool.addChart([
                            {
                                chartId: "#in-chart",
                                yAxisId: "#in-chart-y-axis",
                                legend: "in-legend"
                            }
                        ]);
                        lv.netflow.chartPool.drawAll();
                        lv.netflow.chartPool.startAll();
                    });
                </script>***

netflow.js

 var lv = lv || {};
 lv.netflow = (function(window){
//private variable
var Math = window.Math,
    document = window.document,
    netflow = window.lv.netflow || {},
    $ = window.jQuery,
    Rickshaw = window.Rickshaw;

//public variable


netflow.CHART_TYPE = {
    RUNTIME:{type:"RUNTIME",increment:1},
    DAY:{type:"DAY",increment:60},
    MONTH:{type:"MONTH",increment:3600}
};

//Class
// Constructor
var chartPool = function(options){
    this.numChart = 0;
    this.chartMap = [];
    this.config = function(options){
        if (!options.nodeIdName) throw "Netflow needs a reference to an nodeIdName";
        this.nodeIdName = options.nodeIdName;
        this.viewType = options.viewType;
        this.viewTypeId = options.viewTypeId;
        this.timeSelectedId = options.timeSelectedId;
        this.urlUpdateData = options.urlUpdateData;
    };
    if(options) this.config(options);
};



chartPool.prototype.addChart =function(charts){
    for(var i in charts){
        var key = charts[i].name || "chart-"+i;
        var chart = charts[i];
        chart.urlUpdateData = chart.urlUpdateData || this.urlUpdateData;
        chart.nodeIdName = chart.nodeIdName || this.nodeIdName;

        chart.viewTypeId = chart.viewTypeId || this.viewTypeId;
        chart.viewType = chart.viewType || this.viewType || lv.netflow.CHART_TYPE[$(chart.viewTypeId).val()];
        chart.timeSelectedId = chart.timeSelectedId || this.timeSelectedId;
        if(!(charts[i] instanceof netflowChart)){
            chart = new netflowChart(charts[i]);
        }
        this.chartMap.push({key:key,value:chart});
        this.numChart++;
    }
};

chartPool.prototype.drawAll = function(){
    for(var item in this.chartMap){
        var chart =   this.chartMap[item].value;
        chart.nodeIdValue =  $(chart.nodeIdName).val() ;
        chart.initChart();
    }
    this.updateDataAll(true);
};

chartPool.prototype.startAll = function(){
    var flag = true;
    for(var i in this.chartMap){
        if(this.chartMap[i].value.viewType != netflow.CHART_TYPE.RUNTIME){
            flag = false;
            break;
        }
    }
    if(false == flag ) throw "Can't start all, have a chart not type RUNTIME";
    var _this = this;
    _this.timer = setInterval( function() {

        //Update data first
        for(var item in _this.chartMap){
            _this.chartMap[item].value.updateDataRealTime();
        }
        //After update chart => all chart draw not delay
        for(var item in _this.chartMap){
            _this.chartMap[item].value.graph.update();
        }
    }, 1000 );
};

chartPool.prototype.updateDataAll = function(isInitData){
    this.viewType = lv.netflow.CHART_TYPE[$(this.viewTypeId).val()] || this.viewType;
    if(this.viewType.type != "RUNTIME"){
        for(var item in this.chartMap){
            var chart = this.chartMap[item].value;
            isInitData ? chart.initData(): chart.cleanData();
            chart.updateDataReport();
        }

    }
}

chartPool.prototype.changeNodeId = function(){
    this.updateDataAll(false);
}
chartPool.prototype.changeViewType = function(){
    this.updateDataAll(true);
}
chartPool.prototype.changeTimeSelected = function(){
    this.updateDataAll(true);
}

///////////////////////////////////////////////////
// Constructor
var netflowChart = function (options){
    if(!options.nodeIdName) throw "Netflow chart needs a reference to an nodeIdName";
    if(!options.urlUpdateData) throw "Netflow chart needs a urlUpdateData";
    if(!options.viewType) throw "Netflow chart needs a view Type";
    if(options.viewType.type != "RUNTIME" && !options.timeSelectedId) throw "Netflow chart report needs a reference to an startTimeId";

    this.nodeIdName = options.nodeIdName;
    this.chartId = options.chartId || "#netflow-chart";
    this.yAxisId = options.yAxisId || "y-axis";
    this.legend = options.legend;
    this.urlUpdateData = options.urlUpdateData;
    this.viewType = options.viewType;
    this.viewTypeId = options.viewTypeId;
    this.timeSelectedId = options.timeSelectedId ;

    this.name = options.name || "new chart";
    this.flowDirection = options.flowDirection;
    this.chartWidth = options.chartWidth || 400;
    this.chartHeight = options.chartHeight || 120;
    this.numDataRunTime = options.numDataRunTime || 300;
    this.chartRenderer = options.chartRenderer;

    this.nodeIdValue =null;
    this.dataSeries ={};

    this.graph;
    this.startTime = Number(new Date())/1000;
    this.endTime =Number(new Date())/1000;
    this.lastUpdateTime =  Math.floor(Number(new Date())/1000)-this.numDataRunTime;
};



////////////////////////////////////////////////////////////////////////
netflowChart.prototype.initRangeView = function(timestamp){
    var _this = this;
    _this.viewType = lv.netflow.CHART_TYPE[$(_this.viewTypeId).val()] ||  _this.viewType;
    if(null != timestamp){
        var date = new Date(Number(timestamp));
        if(_this.viewType.type =="DAY"){
            var newDate = new Date(date.getFullYear(), date.getMonth(),date.getDate());
            _this.startTime = Math.round((newDate.getTime()/1000));
            newDate = new Date(date.getFullYear(),date.getMonth(), date.getDate()+1);
            _this.endTime =  Math.round((newDate.getTime()/1000));
        }
        if(_this.viewType.type =="MONTH"){
            var newDate = new Date(date.getFullYear(), date.getMonth());
            _this.startTime = Math.round((newDate.getTime()/1000));
            newDate = new Date(date.getFullYear(), date.getMonth()+1);
            _this.endTime =  Math.round((newDate.getTime()/1000));
        }
    }
};

netflowChart.prototype.initData = function(){
    var _this = this;
    if(_this.viewType.type == "RUNTIME"){
        _this.endTime = Math.floor(Number(new Date())/1000);
        _this.startTime =  _this.endTime - _this.numDataRunTime;
    }else{
        _this.initRangeView($(_this.timeSelectedId).val());
    }

    for(var key in _this.dataSeries){
        var data = _this.dataSeries[key];
        data.length = 0;
        for(var _x = _this.startTime;_x < _this.endTime;_x = _x + _this.viewType.increment){
            data.push({x:_x,y:0});
        }
    }
};

netflowChart.prototype.initChart =function(){
    var _this = this;

    // Create Series
    var series = [];
    if(null == _this.flowDirection){
        _this.chartRenderer = _this.chartRenderer || "line";
        _this.dataSeries["IN"] = [];
        _this.dataSeries["OUT"] = [];
        series = [{name:"IN",data: _this.dataSeries["IN"],color:"#4682B4"},
            {name:"OUT",data: _this.dataSeries["OUT"],color:"#EF6432"}];
    }else{
        _this.chartRenderer = _this.chartRenderer || "area";
        _this.dataSeries[_this.flowDirection] = [];
        series = [{name: _this.flowDirection, data: _this.dataSeries[_this.flowDirection],color:"#4682B4"}];
    }

    _this.initData(_this.currentTime);

    _this.graph = new Rickshaw.Graph({
        element: document.querySelector(_this.chartId),
        width: _this.chartWidth,
        height: _this.chartHeight,
        renderer: _this.chartRenderer,
        series: series
    });

    var time = new Rickshaw.Fixtures.Time.Local();

    // time.units.push({
    //  name: 'week',
    //  seconds: 86400 * 7,
    //  formatter: function(d) {
    //   return d.getUTCDate();
    //  }
    // });

    var timeUnit = time.unit('week');

    timeUnit.formatter = function(d) {
        return d.getUTCDate();
    };
    time.units[time.units.indexOf(timeUnit)] = timeUnit;

    var xAxis = new Rickshaw.Graph.Axis.Time( {
        graph: _this.graph,
        timeFixture: time
    } );
    var yAxis = new Rickshaw.Graph.Axis.Y( {
        graph: _this.graph,
        orientation: 'right',
        tickFormat: _this.utils.formatBase1024KMGTP,
        element: document.querySelector(_this.yAxisId)
    } );

    if(_this.legend){
        var legend = new Rickshaw.Graph.Legend( {
            graph: _this.graph,
            element: document.getElementById(_this.legend)
        } );

        var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
            graph: _this.graph,
            legend: legend
        } );

        /*var order = new Rickshaw.Graph.Behavior.Series.Order( {
            graph: _this.graph,
            legend: legend
        } );*/

        var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
            graph: _this.graph,
            legend: legend
        } );
    }

    var hoverDetail = new Rickshaw.Graph.HoverDetail( {
        graph: _this.graph,
        xFormatter: function(x) { return _this.utils.getDetailsTime(x)},
        yFormatter: function(y) { return  _this.utils.formatBase1024KMGTP(y)  }

    } );
    _this.graph.render();
};



netflowChart.prototype.updateDataReport = function(){
    var _this = this;
    var _nodeID =  $(_this.nodeIdName).val()  ;

    if(_nodeID.length > 0){
        $.ajax({
            url: _this.urlUpdateData,
            data: { nodeId: _nodeID,flowDirection:_this.flowDirection,startTime: _this.startTime,endTime:_this.endTime,viewType:_this.viewType.type},
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            async: false,
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                var _dataResult = result["data"];
                if(null != _dataResult){
                    for(var key in _this.dataSeries){
                        var data = _this.dataSeries[key];
                        updateDataChart(data,_dataResult[key] || _dataResult);
                    };
                }
                function updateDataChart(dataChart,_data){
                    var i =0;
                    for(var item in _data){
                        var timeValue = Number(item);
                        for(;i<dataChart.length;i++){
                            if(dataChart[i+1] && timeValue < dataChart[i+1].x){
                                dataChart[i] = {x: timeValue,y: _data[item]};
                                i++;
                                break;
                            }
                        }
                    }
                }
                _this.graph.update();
            },
            error: function () {
            }
        });
    }
};

netflowChart.prototype.updateDataRealTime = function(){
    var _this = this;
    for(var key in _this.dataSeries){
        var data = _this.dataSeries[key];
        //remove first element
        data.shift();
        //add last element
        data.push({x:data[data.length-1].x+1,y:0});
    };

    //var _nodeID = this.nodeIdValue.val();
    var _nodeID =  $(_this.nodeIdName).val() ;
    if(_nodeID != _this.nodeIdValue){
        //window.chartDialogLoading.show();
        _this.nodeIdValue = _nodeID;
        _this.cleanData();
        _this.lastUpdateTime =  Math.floor(Number(new Date())/1000)-_this.numDataRunTime;

    }

    if(typeof(_nodeID) != 'undefined'){
        $.ajax({
            url: _this.urlUpdateData,
            data: { nodeId: _nodeID,flowDirection:_this.flowDirection,lastUpdateTime: _this.lastUpdateTime },
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            async: false,
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                var _dataResult = result["data"];
                if(null != _dataResult){
                    for(var key in _this.dataSeries){
                        var data = _this.dataSeries[key];
                        updateDataChart(data,_dataResult[key] || _dataResult);
                    };
                }
                function updateDataChart(dataChart,_data){
                    for(var i =0;i<_this.numDataRunTime;i++){
                        if(dataChart[i].x > _this.lastUpdateTime){
                            if(null != _data[dataChart[i].x]){
                                dataChart[i].y = _data[dataChart[i].x];
                                _this.lastUpdateTime = dataChart[i].x;
                            }
                        }
                    }
                }
            },
            error: function () {
            }
        });
    }
};

netflowChart.prototype.cleanData = function(){
    var _this = this;
    for(var key in _this.dataSeries){
        var data = _this.dataSeries[key];
        for(var i =0;i< data.length;i++){
            data[i] = {x:data[i].x,y:0};
        }
    };
};

netflowChart.prototype.drawChart = function(){
    this.nodeIdValue =  $(this.nodeIdName).val()  ;
    this.initChart();
};

netflowChart.prototype.startRunTime = function(){
    var _this = this;
    _this.timer = setInterval( function() {
        _this.updateDataRealTime();
        _this.graph.update();
    }, 1000 );
};

netflowChart.prototype.utils ={
    formatBase1024KMGTP : function(y) {
        var abs_y = Math.abs(y);
        if (abs_y >= 1125899906842624)  { return (y / 1125899906842624).toFixed(1) + " PB" }
        else if (abs_y >= 1099511627776){ return (y / 1099511627776).toFixed(1) + " TB" }
        else if (abs_y >= 1073741824)   { return (y / 1073741824).toFixed(1) + " GB" }
        else if (abs_y >= 1048576)      { return (y / 1048576).toFixed(1) + " MB" }
        else if (abs_y >= 1024)         { return (y / 1024).toFixed(1) + " KB" }
        else if (abs_y < 1 && y > 0)    { return y.toFixed(2) + " bytes" }
        else if (abs_y === 0)           { return '' }
        else                        { return y + " bytes" }
    },
    getDetailsTime : function(x){
        var dateTime = new Date(x*1000);
        var result =   dateTime.getHours().toString()+ ":" + dateTime.getMinutes().toString()+ ":" +  dateTime.getSeconds().toString();
        result += "  ";
        result += dateTime.getDate().toString() + "/"  + (dateTime.getMonth()+1).toString()+"/"+dateTime.getFullYear().toString();
        return result ;
    },
    bitToSize :function(bit) {
        var sizes = ['Bit', 'KB', 'MB', 'GB', 'TB'];
        if (bit == 0) return '0';
        var i = parseInt(Math.floor(Math.log(bit) / Math.log(1024)));
        return Math.round(bit / Math.pow(1024, i), 2) + ' ' + sizes[i];
    },
    bitToSizeForAxis : function(bit) {
        var sizes = ['Bit', 'KB', 'MB', 'GB', 'TB'];
        if (bit == 0) return '';
        var i = parseInt(Math.floor(Math.log(bit) / Math.log(1024)));
        return Math.round(bit / Math.pow(1024, i), 2) + ' ' + sizes[i];
    },
    parseDate : function(input) {
        var parts = input.split('/');
        // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
        return new Date(parts[2], parts[1]-1, parts[0]); // months are 0-based
    }

}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

netflow.ChartPool = chartPool;
netflow.NetflowChart = netflowChart;
return netflow;
 })(window);

$(document).ready(function(){
lv.netflow.chartPool = new lv.netflow.ChartPool();
 });
Теги:
jsf
primefaces
mobile

1 ответ

0

используйте этот код для изменения размеров диаграмм направленности

        <script type="text/javascript">
        $(window).resize(function() {
            resizePlot();
            lineChart_ext();
        });
        function resizePlot() {
            widthDiv = $('#dashPanel').width();
            heightDiv = $('#dashPanel').height();
            $('#chart').height($('#dashPanel').height() * 0.93);
            $('#chart').width($('#dashPanel').width() * 0.93);
            chart.plot.replot({});
        }
        ;
        function lineChart_ext() {
            this.cfg.axes = {
                xaxis: {
                    min: 0,
                    max: 23,
                    tickInterval: 1,
                    autoscale: true,
                    tickOptions: {
                        formatString: '%d',
                        fontSize: '8pt'
                    }
                },
                yaxis: {
                    autoscale: true,
                    min: 0,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: {
                        autoscale: true,
                        fontSize: '10pt',
                        angle: 15
                    }
                }
            },
            this.cfg.legend = {
                renderer: $.jqplot.EnhancedLegendRenderer,
                show: true,
                showLabels: true,
                location: 'nw',
                placement: 'inside',
                fontSize: '11px',
                fontFamily: ["Lucida Grande", "Lucida Sans Unicode", "Arial", "Verdana", "sans-serif"],
                rendererOptions: {
                    seriesToggle: 'normal'
                },
                grid: {
                    backgroundColor: "white"
                }
            };
        }
    </script>

затем для веб-страницы диаграммы

 <p:panel id="dashPanel" style="width:85%;height: 420px;margin: auto;font-weight: bold;">
        <h:panelGrid style="margin: auto;" columns="2">
            <h:outputLabel value="Market" />
            <h:selectOneMenu>
                <f:selectItems value="#{monitorBean.services}"/>
            </h:selectOneMenu>
        </h:panelGrid>
        <br/>
        <hr />
        <p:lineChart widgetVar="chart" id="chart" style="width:95%;" extender="lineChart_ext" value="#{monitorBean.cartesianChartModel}" 
                     legendPosition="ne" title="Transactions Monitoring" />
    </p:panel>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню