ハイチャート円グラフを使用しています。異なる一連のデータを含む 4 つの円グラフを 1 ページに表示しています。それはうまく機能しています。しかし、フレームセットを使用してその中でそれらのページを呼び出すと、これらの円グラフは表示されませんが、ページを前方に移動してから後方に移動すると、グラフが表示されます。これを理解するのを手伝ってください。
<?php
include('../control/config.php');
if($_REQUEST['basic']!=null)
{
if($_REQUEST['basic']=='internal')
{
$basepage='internal.php';
}
if($_REQUEST['basic']=='external')
{
$basepage='index.php';
}
}
$projectdir= '../data/project';
// Open a known directory, and proceed to read its filename
if (is_dir($projectdir))
{
if ($dh = opendir($projectdir))
{
while (($file = readdir($dh)) !== false)
{
if($file!="." and $file!=".." and $file!=".svn")
{
$project_files[]=$file;
}
}
closedir($dh);
}
}
if($_REQUEST['pie']!=null){
if($_REQUEST['pie']==0){
$pie1=0;
$pie2=1;
$pie3=2;
$pie4=3;
}
if($_REQUEST['pie']==1){
$pie1=4;
$pie2=5;
$pie3=6;
$pie4=7;
}
if($_REQUEST['pie']==2){
$pie1=8;
$pie2=9;
$pie3=10;
$pie4=11;
}
if($_REQUEST['pie']==3){
$pie1=12;
$pie2=13;
$pie3=14;
$pie4=15;
}
}
else{
$pie1=0;
$pie2=1;
$pie3=2;
$pie4=3;
}
$projectname1=explode('.',$project_files[$pie1]);
$projectname2=explode('.',$project_files[$pie2]);
$projectname3=explode('.',$project_files[$pie3]);
$projectname4=explode('.',$project_files[$pie4]);
session_start();
$_SESSION['piefilename1'] = '../data/project/'.$project_files[$pie1];
session_start();
$_SESSION['piefilename2'] = '../data/project/'.$project_files[$pie2];
session_start();
$_SESSION['piefilename3'] = '../data/project/'.$project_files[$pie3];
session_start();
$_SESSION['piefilename4'] = '../data/project/'.$project_files[$pie4];
?>
<head>
<title>AFLS ISSUE SUMMARY</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<LINK REL="StyleSheet" HREF="../style/default.css" TYPE="text/css" MEDIA="screen">
<script>
function go_to_url()
{
document.location.href='<?php echo $base_path.$basepage;?>?pgco='+<?php echo $_REQUEST['pgco'];?>+'&pie='+<?php echo $_REQUEST['pie'];?>;
}
function timeGreeting()
{
window.setTimeout(go_to_url, <?php echo $_REQUEST['seq'];?> );
//milliseconds to load next page.
}
timeGreeting();
</script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/pie.js"></script>
<script type="text/javascript">
var myfile='<?php echo $project_files[$pie1];?>';
var options1 = {
chart: {
renderTo: 'container1',
defaultSeriesType: 'pie',
spacingTop: 10,
spacingBottom: 5,
spacingLeft: 5,
spacingRight: 5
},
title: {
text: '<?php echo $projectname1[0];?>'
},
plotOptions: {
pie: {
size:'74%',
allowPointSelect: false,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
rotation: 0,
distance: 10,
enabled: true,
color: '#2f7ed8',
formatter: function() {
if(this.y == 0)
return null
else
return this.point.name + ' [ ' + Highcharts.numberFormat(this.y, 0) + ' ]';
}
}
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'middle',
useHTML: true,
borderWidth: 5,
borderRadius: 10,
labelFormatter: function() {
return '<div style="text-align: left; width:130px;">' + this.name + '</div><div style="width:40px; text-align:right;">' + this.y + '%</div>';
}
},
series : []
};
var myfile='<?php echo '../data/project/'.$project_files[$pie1];?>';
$.get(myfile,function(data) {
// Split the lines
var lines = data.split(';');
var series = {
dataLabels: {
enabled: true,
style: {
color: '#000000',
fontFamily: 'verdana',
fontSize: '12px',
lineHeight: '21px'
}},
data: []
};
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo,line) {
var items = line.split(',');
series.data.push({
type:'pie',
name: items[0],
y:parseFloat(items[1])
});
});
options1.series.push(series);
// Create the chart
var chart = new Highcharts.Chart(options1);
});
</script>
<script type="text/javascript">
var myfile='<?php echo '../data/project/'.$project_files[$pie2];?>';
var options2 = {
chart: {
renderTo: 'container2',
defaultSeriesType: 'pie',
spacingTop: 10,
spacingBottom: 5,
spacingLeft: 5,
spacingRight: 5
},
title: {
text: '<?php echo $projectname2[0];?>'
},
plotOptions: {
pie: {
size:'74%',
allowPointSelect: false,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
rotation: 0,
distance: 10,
color: '#2f7ed8',
enabled: true,
formatter: function() {
if(this.y == 0)
return null
else
return this.point.name + ' [ ' + Highcharts.numberFormat(this.y, 0) + ' ]';
}
}
}
},
colors: [
'#4572A7',
'#AA4643',
'#DB843D'
],
series : []
};
$.get(myfile,function(data) {
// Split the lines
var lines = data.split(';');
var series = {
dataLabels: {
enabled: true,
style: {
color: '#000000',
fontFamily: 'verdana',
fontSize: '12px',
lineHeight: '21px'
}},
data: []
};
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo,line) {
var items = line.split(',');
series.data.push({
type:'pie',
name: items[0],
y:parseFloat(items[1])
});
});
options2.series.push(series);
// Create the chart
var chart = new Highcharts.Chart(options2);
});
</script>
<script type="text/javascript">
var myfile='<?php echo '../data/project/'.$project_files[$pie3];?>';
var options3 = {
chart: {
renderTo: 'container3',
defaultSeriesType: 'pie',
spacingTop: 10,
spacingBottom: 5,
spacingLeft: 5,
spacingRight: 5
},
title: {
text: '<?php echo $projectname3[0];?>'
},
plotOptions: {
pie: {
size:'74%',
allowPointSelect: false,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
rotation: 0,
distance: 10,
color: '#2f7ed8',
enabled: true,
formatter: function() {
if(this.y == 0)
return null
else
return this.point.name + ' [ ' + Highcharts.numberFormat(this.y, 0) + ' ]';
}
}
}
},
colors: [
'#4572A7',
'#AA4643',
'#DB843D'
],
series : []
};
$.get(myfile,function(data) {
// Split the lines
var lines = data.split(';');
var series = {
dataLabels: {
enabled: true,
style: {
color: '#000000',
fontFamily: 'verdana',
fontSize: '12px',
lineHeight: '21px'
}},
data: []
};
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo,line) {
var items = line.split(',');
series.data.push({
type:'pie',
name: items[0],
y:parseFloat(items[1])
});
});
options3.series.push(series);
// Create the chart
var chart = new Highcharts.Chart(options3);
});
</script>
<script type="text/javascript">
var myfile='<?php echo '../data/project/'.$project_files[$pie4];?>';
var options4 = {
chart: {
renderTo: 'container4',
defaultSeriesType: 'pie',
spacingTop: 10,
spacingBottom: 5,
spacingLeft: 5,
spacingRight: 5
},
title: {
text: '<?php echo $projectname4[0];?>'
},
plotOptions: {
pie: {
size:'74%',
allowPointSelect: false,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
rotation: 0,
distance: 10,
color: '#2f7ed8',
enabled: true,
formatter: function() {
if(this.y == 0)
return null
else
return this.point.name + ' [ ' + Highcharts.numberFormat(this.y, 0) + ' ]';
}
}
}
},
colors: [
'#4572A7',
'#AA4643',
'#DB843D'
],
series : []
};
$.get(myfile,function(data) {
// Split the lines
var lines = data.split(';');
var series = {
dataLabels: {
enabled: true,
style: {
color: '#000000',
fontFamily: 'verdana',
fontSize: '12px',
lineHeight: '21px'
}},
data: []
};
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo,line) {
var items = line.split(',');
series.data.push({
type:'pie',
name: items[0],
y:parseFloat(items[1])
});
});
options4.series.push(series);
// Create the chart
var chart = new Highcharts.Chart(options4);
});
</script>
</head>
<body>
<?php include('header.php');?>
<table border='0' width='100%'>
<tr>
<td width='50%' align='right' valign='top'>
<?php include('pie1.php');?>
</td>
<td width='50%' align='right' valign='top'>
<?php include('pie2.php');?>
</td>
</tr>
<tr>
<td width='50%' align='right' valign='top'>
<?php include('pie3.php');?>
</td>
<td width='50%' align='right' valign='top'>
<?php include('pie4.php');?>
</td>
</tr>
</table>
</body>
</html>