Question

我正在使用bootstrap和这个PHP类来制作条形图，但是，我无法理解如何使条形的宽度相对于容器的宽度。我会以某种方式使用媒体查询获取视口的宽度，并将其作为PHP $ var ...传递给我吗？

var $target = ""; 

public function __construct($target){
    $this->target = $target;
}

public function bar_graph($target){

    $date = date("Y-m-d");

    $data = "views/".$target.".xml";
    $xml = simplexml_load_file($data)or die("Error: Cannot create object");
        echo '<div class="gph_bar" style="height:200px;background:#ddd;position:relative;width:300px;margin:auto;overflow:hidden;">';
        echo '<h2>Views by Day.</h2>';
        for($i=0;$i<10;$i++){

            $x = date("Y-m-d", strtotime( '-'.$i.' days' ) );


            $date1 = $xml->xpath('view[date="'.$x.'"]');

            $y = 0;
            foreach($date1 as $number){
                $y++;   
            }
                $height = $y*2;
                $left = $i *33 + 5;
                echo $bottom.'</br>';

            echo '<div class="bar" style="height:'.$height.'px;position:absolute;bottom:0;overflow:hidden;min-height:2px; right:'.$left.'px;width:27px;background:#1a1a1a;color:white;">'.$y.'</div>';

        }
        echo '</div>';
}

}

Answer 1

尝试类似：

<?php
class graph{
var $target=""; 
public function __construct($target){
$this->target=$target;
}
public function bar_graph($target){
$data="views/".$target.".xml";
$xml=simplexml_load_file($data)or die("The data in this file is Parsed incorectly");
    echo'<div class="gph_bar">';
    echo'<h2>Views by Day</h2>';
    for($i=0;$i<10;$i++){   
        $x=date("Y-m-d",strtotime('-'.$i.' days'));         
        $date=$xml->xpath('view[date="'.$x.'"]');
        $y=0;
        foreach($date as $number){
            $y++;   
        }
        $height=$y*2;
        $left=$i*10+.5;
        echo'<div class="bar" style="height:'.$height.'px;right:'.$left.'%;">'.$y.'</div>';         
    }
    echo'</div>';
}

}

动态宽度条形图

1 个答案: