Question

我有一个包含大量记录的数据库，我必须创建一个foreach循环才能获取所有数据。问题是每个数据的图表都会使页面超载。因此，我需要使用两个div和一个div（蓝色一个）来制作一个条形图表，以获取主数据（灰色div）的百分比，从该数据中获取值。我做了所有这些，但我不知道如何使内部div构建根据它与数据库中的最高值的接近程度来改变它的百分比宽度。这就是我获取右边所示数字的方法。

<?php echo @$item->{"media_count"}; ?>

我会附上一张图片，这样你就可以看到我需要让它看起来像。 barlike chart

      <table class="table table-bordered">
        <tbody style="width: 401px; border: 0;">
         <?php foreach ($data->data->data as $key => $item):
            if (@$item->{"name"}) {
          ?>
                 <tr>
                    <td>
                        <?php echo @$item->{"name"}; ?>
                    </td>
                    <td>
                        <div class="outer">
                            <div class="inner" style="width: 20%;"></div>
                        </div>
                    </td>
                    <td>
                        <?php echo @$item->{"media_count"}; ?>
                    </td>
                </tr>   
        <?php }
        endforeach ?>
        </tbody>
    </table>

内部和外部div的CSS：

<style type="text/css">
    .outer, .inner {
      height: 14px;
      margin-bottom: 5px;
    }

    .outer {
      background-color: #cccccc;
      width: 200px;
      margin: 0 auto;
    }

    .inner {
      background-color: #66a3ff;

    }

td {
    border:none;
}
table {
    border:1px solid #CCC;
    border-collapse:collapse;
}


</style>

Answer 1

我的代码中有一些我不太确定的东西（比如使用错误抑制操作符），但我认为下面的代码将为您提供一个很好的工作示例，说明如何完成您的工作。寻找。

<?php
    $max = 1;
    foreach( $data->data->data as $tmp )
        $max = ( ( $tmp->media_count > $max )? $tmp->media_count: $max );
?>
        <table class="table table-bordered">
            <tbody style="width: 401px; border: 0;">
<?php
    foreach( $data->data->data as $item ){
        if( $item->name ){
            $percent = $item->media_count / $max;
?>
                <tr>
                    <td>
                        <?php echo htmlspecialchars( $item->name ); ?>
                    </td>
                    <td>
                        <div class="outer">
                            <div class="inner" style="width: <?php echo round( 100 * $percent) ?>%;"></div>
                        </div>
                    </td>
                    <td>
                        <?php echo htmlspecialchars( $item->media_count ); ?>
                    </td>
                </tr>
<?php
        }
    }
?>
            </tbody>
        </table>

根据您检索数据的方式，可能有更多有效的方法来获取数据的最大值而不是循环遍历整个结构，但是，因为您没有向我们展示如何检索数据原来的问题，我采取了我唯一的方法。

根据数据库值动态更改宽度

1 个答案: