1. 首頁
  2. 問答
  3. 在移動設備上使用lib primefaces時出現錯誤顯示圖表

在移動設備上使用lib primefaces時出現錯誤顯示圖表

2014-02-20 33 views
0

我在爲移動設備jsf編寫網站。在我的代碼中，我使用lib primefaces mobile，所有信息都在移動設備上顯示良好。但是圖表在手機上顯示的尺寸錯誤，圖表尺寸大於手機屏幕的尺寸。當你水平打開手機的情況下。我不知道如何在屏幕上正確顯示移動圖表。 mycode的在移動設備上使用lib primefaces時出現錯誤顯示圖表

<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(); 
});

來源

2014-02-20 Takeshi

回答

0

使用此代碼調整primefaces圖表

 <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>

來源

2014-04-15 11:47:55 user1183033

相關問題

 相關問題