jqplot时间24小时以上

我想用jqplot制作一个高于24:00（小时）的值的条形图，但时间到了第二天。jqplot时间24小时以上

如果非要23:00它工作正常，但是当我有25:00，这表明它是1:00

是否有使用dateAxisRenderer只小时，让它去到一个选项我的数据值最大？

请一定帮忙！

<!DOCTYPE html> 

<html> 
<head> 
    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /> 
    <link rel="stylesheet" type="text/css" href="examples.min.css" /> 

    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]--> 
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


</head> 
<body> 

<?php 

$tot_week_manhours_vs_assignmenthours=array(); 
$tot_week_manhours_vs_assignmenthours['title']="my plot title"; 
$tot_week_manhours_vs_assignmenthours['manhours']['07:00-08:00'] = '02:25:53'; 
$tot_week_manhours_vs_assignmenthours['manhours']['08:00-09:00']='16:34:37'; 
$tot_week_manhours_vs_assignmenthours['manhours']['09:00-10:00']='17:00:00'; 
$tot_week_manhours_vs_assignmenthours['manhours']['10:00-11:00']='17:00:00'; 
$tot_week_manhours_vs_assignmenthours['manhours']['11:00-12:00']='16:22:47'; 
$tot_week_manhours_vs_assignmenthours['manhours']['12:00-13:00']='16:00:00'; 
$tot_week_manhours_vs_assignmenthours['manhours']['13:00-14:00']='15:44:38'; 
$tot_week_manhours_vs_assignmenthours['manhours']['14:00-15:00']='15:00:00'; 
$tot_week_manhours_vs_assignmenthours['manhours']['15:00-16:00']='12:42:49'; 
$tot_week_manhours_vs_assignmenthours['manhours']['16:00-17:00']='01:38:06'; 
$tot_week_manhours_vs_assignmenthours['manhours']['17:00-18:00']='00:00:00'; 

$tot_week_manhours_vs_assignmenthours['assignmenthours']['07:00-08:00']='00:00:00'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['08:00-09:00']='01:56:48'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['09:00-10:00']='03:54:20'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['10:00-11:00']='01:57:12'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['11:00-12:00']='04:36:33'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['12:00-13:00']='00:59:54'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['13:00-14:00']='02:56:38'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['14:00-15:00']='01:23:17'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['15:00-16:00']='02:32:50'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['16:00-17:00']='00:00:00'; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['17:00-18:00']='25:00:25'; 

$tot_week_manhours_vs_assignmenthours['ticks'][0]='07:00-08:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][1]='08:00-09:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][2]='09:00-10:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][3]='10:00-11:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][4]='11:00-12:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][5]='12:00-13:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][6]='13:00-14:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][7]='14:00-15:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][8]='15:00-16:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][9]='16:00-17:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][10]='17:00-18:00'; 

echo "<pre>"; 
print_r($tot_week_manhours_vs_assignmenthours); 
echo "</pre>"; 

$chartname="chart1"; 
?> 



<div id="chart1" style="height:400px; width:100%;"></div> 


    <style type="text/css"> 
     #<?php echo $chartname; ?> .jqplot-point-label { 
      color:#666666; 
      font-size:14px; 
     }     
    </style>  
    <script class="code" type="text/javascript"> 
    $(document).ready(function(){ 

     <?php 
       $js_array = json_encode($tot_week_manhours_vs_assignmenthours['manhours']); 
       echo "var manhours = ". $js_array . ";\n"; 
       $w=json_encode($tot_week_manhours_vs_assignmenthours['assignmenthours']); 
       echo "var assignmenthours = ". $w . ";\n"; 
       $t=json_encode($tot_week_manhours_vs_assignmenthours['ticks']); 
       echo "var ticks = ". $t . ";\n"; 
     ?> 

     var s1= new Array(); 
     for (var k in manhours){ 
      if (manhours.hasOwnProperty(k)) { 
       //alert("Key is " + k + ", value is" + manhours[k]); 
       s1.push(manhours[k]); 
      } 
     } 

     var s2= new Array(); 
     for (var j in assignmenthours){ 
      if (assignmenthours.hasOwnProperty(j)) { 
       //alert("Key is " + k + ", value is" + manhours[k]); 
       s2.push(assignmenthours[j]); 
      } 
     }  

     // Can specify a custom tick Array. 
     // Ticks should match up one for each y value (category) in the series. 
     // var ticks = ['May', 'June', 'July', 'August']; 

     var plot1 = $.jqplot('chart1', [s1, s2], { 
      // The "seriesDefaults" option is an options object that will 
      // be applied to all series in the chart. 
      seriesDefaults:{ 
       renderer:$.jqplot.BarRenderer, 
       pointLabels: { show: true }, 
       rendererOptions: {fillToZero: true} 
      }, 
      // Custom labels for the series are specified with the "label" 
      // option on the series option. Here a series option object 
      // is specified for each series. 
      series:[ 
       {label:'Man-uren'}, 
       {label:'Opdracht uren'} 
      ], 
      // Show the legend and put it outside the grid, but inside the 
      // plot container, shrinking the grid to accomodate the legend. 
      // A value of "outside" would not shrink the grid and allow 
      // the legend to overflow the container. 
      legend: { 
       show:true, 
       placement: 'inside', 
       rendererOptions: { 
        numberRows: 1 
       }, 
       location:'ne', 
       marginTop: '15px', 
       marginRight: '30px' 
      }, 
      axes: { 
       // Use a category axis on the x axis and use our custom ticks. 
       xaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer, 
        ticks: ticks 
       }, 
       // Pad the y axis just a little so bars can get close to, but 
       // not touch, the grid boundaries. 1.2 is the default padding. 
       yaxis: { 
        renderer: $.jqplot.DateAxisRenderer, 
        pad: 1.05, 
        tickOptions: { 
         formatString: "%H:%M" 
        } 
       } 
      } 
     }); 
    }); 
</script> 

    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script> 
    <script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script> 
    <script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script> 
</body> 


</html>

来源

2014-09-04 user2064635

如果使用dateAxisRenderer它的接缝明显，25H无法显示。如果你想显示25h00，使用经典的axisRenderer并修改标签（即，如果你有25，添加'h'后缀） – AnthonyLeGovic 2014-09-04 08:34:41

嗨，thanx你的回复，但我怎么这样？一个很好的解决方案是将一个选项添加到dateAxisRenderer（above24：true），并且它只在H：m：s中计数。但正如你所说，我需要一个经典的axisRenderer并修改标签。你能解释怎么做？ – user2064635 2014-09-04 13:53:00

你可以做一个预处理来构建一个包含你的数据值的数组，然后使用这个数组作为yaxis滴答 – AnthonyLeGovic 2014-09-04 14:53:23

确实修改标签的伎俩，这里的完整的答案与我曾经得到这个工作的所有代码，因此，如果其他任何人遇到这个问题将有一个完整的工作示例。

不是以H：i：s格式向图表提供数据，而是以秒为单位给出数据，并在yaxis格式化程序中处理H：i：s格式的秒数。

再次感谢您指引我在正确的方向。可惜大多数的这些问题，没有人会作出努力，以提供一个完整的工作示例答案，所以她是我的：

<!DOCTYPE html> 

<html> 
<head> 
    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /> 
    <link rel="stylesheet" type="text/css" href="examples.min.css" /> 

    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]--> 
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


</head> 
<body> 

<?php 

$tot_week_manhours_vs_assignmenthours=array(); 
$tot_week_manhours_vs_assignmenthours['title']="my plot title"; 
$tot_week_manhours_vs_assignmenthours['manhours']['07:00-08:00'] =34667; 
$tot_week_manhours_vs_assignmenthours['manhours']['08:00-09:00']=261453; 
$tot_week_manhours_vs_assignmenthours['manhours']['09:00-10:00']=273590; 
$tot_week_manhours_vs_assignmenthours['manhours']['10:00-11:00']=272810; 
$tot_week_manhours_vs_assignmenthours['manhours']['11:00-12:00']=257459; 
$tot_week_manhours_vs_assignmenthours['manhours']['12:00-13:00']=252000; 
$tot_week_manhours_vs_assignmenthours['manhours']['13:00-14:00']=250222; 
$tot_week_manhours_vs_assignmenthours['manhours']['14:00-15:00']=241106; 
$tot_week_manhours_vs_assignmenthours['manhours']['15:00-16:00']=210750; 
$tot_week_manhours_vs_assignmenthours['manhours']['16:00-17:00']=23470; 
$tot_week_manhours_vs_assignmenthours['manhours']['17:00-18:00']=0; 

$tot_week_manhours_vs_assignmenthours['assignmenthours']['07:00-08:00']=0; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['08:00-09:00']=19907; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['09:00-10:00']=58960; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['10:00-11:00']=24520; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['11:00-12:00']=78638; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['12:00-13:00']=9576; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['13:00-14:00']=46201; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['14:00-15:00']=27642; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['15:00-16:00']=31582; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['16:00-17:00']=154; 
$tot_week_manhours_vs_assignmenthours['assignmenthours']['17:00-18:00']=1116; 

$tot_week_manhours_vs_assignmenthours['ticks'][0]='07:00-08:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][1]='08:00-09:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][2]='09:00-10:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][3]='10:00-11:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][4]='11:00-12:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][5]='12:00-13:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][6]='13:00-14:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][7]='14:00-15:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][8]='15:00-16:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][9]='16:00-17:00'; 
$tot_week_manhours_vs_assignmenthours['ticks'][10]='17:00-18:00'; 

echo "<pre>"; 
print_r($tot_week_manhours_vs_assignmenthours); 
echo "</pre>"; 

$chartname="chart1"; 
?> 



<div id="chart1" style="height:400px; width:100%;"></div> 


    <style type="text/css"> 
     #<?php echo $chartname; ?> .jqplot-point-label { 
      color:#666666; 
      font-size:14px; 
     }     
    </style>  
    <script class="code" type="text/javascript"> 
    function sec_to_str(seconds, format) 
    { 
     var hours = Math.floor(seconds/3600); 
     if(hours<10) 
      hours="0"+hours; 

     var minutes = Math.floor((seconds/ 60) % 60); 
     if(minutes<10) 
      minutes="0"+minutes; 

     var seconds = seconds % 60; 
     if(seconds<10) 
      seconds="0"+seconds; 

     //check given format 
     // format can be  H,  H:i, H:i:s 
     if(format=="H") 
      var ret=hours; 
     else if(format=="H:i") 
      var ret=hours+":"+minutes; 
     else if (format=="H:i:s" || format=="") 
      var ret=hours+":"+minutes+":"+seconds; 

     return ret; 
    } 
    $(document).ready(function(){ 

     <?php 
       $js_array = json_encode($tot_week_manhours_vs_assignmenthours['manhours']); 
       echo "var manhours = ". $js_array . ";\n"; 
       $w=json_encode($tot_week_manhours_vs_assignmenthours['assignmenthours']); 
       echo "var assignmenthours = ". $w . ";\n"; 
       $t=json_encode($tot_week_manhours_vs_assignmenthours['ticks']); 
       echo "var ticks = ". $t . ";\n"; 
     ?> 

     var s1= new Array(); 
     for (var k in manhours){ 
      if (manhours.hasOwnProperty(k)) { 
       //alert("Key is " + k + ", value is" + manhours[k]); 
       s1.push(manhours[k]); 
      } 
     } 

     var s2= new Array(); 
     for (var j in assignmenthours){ 
      if (assignmenthours.hasOwnProperty(j)) { 
       //alert("Key is " + k + ", value is" + manhours[k]); 
       s2.push(assignmenthours[j]); 
      } 
     }  

     // Can specify a custom tick Array. 
     // Ticks should match up one for each y value (category) in the series. 
     // var ticks = ['May', 'June', 'July', 'August']; 

     var plot1 = $.jqplot('chart1', [s1, s2], { 
      // The "seriesDefaults" option is an options object that will 
      // be applied to all series in the chart. 
      seriesDefaults:{ 
       renderer:$.jqplot.BarRenderer, 
       pointLabels: { show: true }, 
       rendererOptions: {fillToZero: true} 
      }, 
      // Custom labels for the series are specified with the "label" 
      // option on the series option. Here a series option object 
      // is specified for each series. 
      series:[ 
       {label:'Man-uren'}, 
       {label:'Opdracht uren'} 
      ], 
      // Show the legend and put it outside the grid, but inside the 
      // plot container, shrinking the grid to accomodate the legend. 
      // A value of "outside" would not shrink the grid and allow 
      // the legend to overflow the container. 
      legend: { 
       show:true, 
       placement: 'inside', 
       rendererOptions: { 
        numberRows: 1 
       }, 
       location:'ne', 
       marginTop: '15px', 
       marginRight: '30px' 
      }, 
      axes: { 
       // Use a category axis on the x axis and use our custom ticks. 
       xaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer, 
        ticks: ticks 
       }, 
       // Pad the y axis just a little so bars can get close to, but 
       // not touch, the grid boundaries. 1.2 is the default padding. 
       yaxis: { 
        tickRenderer: $.jqplot.AxisTickRenderer, 
        tickOptions: { 
        formatter: function(format, value) { 
         var timestring=sec_to_str(value, "H:i"); 
         return timestring; 
         } 
        } 
       } 
      } 
     }); 
    }); 
</script> 

    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script> 
    <script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script> 
    <script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script> 
</body> 


</html>

来源

2014-09-09 07:30:32 user2064635

jqplot时间24小时以上

回答

相关问题