Question

我正在使用高图中的三维饼图。特别是我有一个表，在每列（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;}

我希望列的宽度相同！

多个饼图高图

0 个答案: