我想使用jqplot制作一个条形图，其值大于24:00（小时），但时间会到达第二天。
如果我有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>
答案 0 :(得分：0)
确实修改了标签就行了，这里是我用来使这个工作的所有代码的完整答案，所以如果遇到这个问题的其他任何人都会有一个完整的工作示例。
不是以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>