我正在使用高图中的三维饼图。特别是我有一个表,在每列(4列)中我显示一个图表。我有这种情况:
正如您所看到的,单元格的宽度不同。 HTML -javascript代码是(显示一个与其他3个相同的图形):
Highcharts.chart('container1', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
options3d: {
enabled: true,
alpha:70,
beta: 0
}
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
size:100,
depth: 15,
dataLabels: {
textOverflow:'none',
enabled: true,
color:'black',
connectorColor:'transparent',
format:'{point.percentage:.1f}%',
distance:-30,
style:{
textShadow:false}
},
showInLegend: false
}
},
series: [{
type: 'pie',
name: 'ΑΞΚΟΙ - ΑΝΘΣΤΕΣ',
data: [
['Παρόντες', <?php
while ($row2 = mysql_fetch_assoc($res2)) {
while( $row1 = mysql_fetch_assoc($res1)){
$row3['COUNT(*)']=$row2['COUNT(*)'] - $row1['COUNT(*)'];
echo $row3['COUNT(*)'];
}
}?>],
['Απόντες', <?php
while( $row3 = mysql_fetch_assoc($res3)){
echo $row3['COUNT(*)'];
}
?>]
]
}]
});
我将图表显示为div。所以HTML代码是:
<tr class='print_dynamometer'>
<td class='print_dynamometer' colspan='5'><div id='container1' style='width: 150px; height: 150px; margin:0 auto; left:0px top:0px;'><div></td>
<td class='print_dynamometer' colspan='5'><div id='container2' style='width: 150px; height: 150px; margin:0 auto; left:0px top:0px;'><div></td>
<td class='print_dynamometer' colspan='5'><div id='container3' style='width: 150px; height: 150px; margin:0 auto; left:0px top:0px;'><div></td>
<td class='print_dynamometer' colspan='5'><div id='container4' style='width: 150px; height: 150px; margin:0 auto; left:0px top:0px;'><div></td>
</tr>
CSS代码是:
table.print_dynamometer{border:1px solid black;border-collapse:collapse;text-align:left; margin:0px auto; width:680px; height:auto;font-family:Arial;font-size:12px;padding:2px; background-color:white;}
th.print_dynamometer,td.print_dynamometer,tr.print_dynamometer{border:1px solid black;border-collapse:collapse;text-align:left; margin:0px auto; width:575; height:auto;font-family:Arial;font-size:12px;padding:2px; background-color:white; white-space:nowrap;}
我希望列的宽度相同!