создание гистограммы в php - PullRequest
Новая
       12

создание гистограммы в php

0 голосов
/ 16 июля 2010

Как я могу создавать графики, как это .. alt text

<?= format_size($this->space_used); ?> out of <?= format_size($this->total_space); ?>

Ответы [ 7 ]

2 голосов
/ 16 июля 2010

Пример HTML: 

<html>
<head>
<style>

.container 
{
    width: 200px;
    height: 50px;

    border-style: solid;
    border-width: 1px;

}

.meter
{
    width: 20%;
    height: 100%;
    background-color: rgb(0, 255, 0);
}


</style>
</head>
<body>

<div class="container">

<div class="meter">
&nbsp
</div>

</div>

</body>
</html>

альтернативный текст http://grab.by/grabs/3c015b3e6d6839827d2700aa1ed33ad4.png

Конечно, это работает, только если его статические данные, если они динамические, вам нужен какой-то javascript, либо используя плагин jQuery, как упомянуто, либо разверните свой собственный.

2 голосов
/ 16 июля 2010

Прежде всего, это не гистограмма, это индикатор выполнения.

Что касается реализации этого, я бы предпочел использовать JavaScript для фактического рендеринга. Например, посмотрите на индикатор выполнения jQuery UI .

В противном случае, поскольку это, по-видимому, статические данные, вы можете рассчитать процент в сценарии PHP, а затем либо сгенерировать изображение на лету, либо выбрать из набора предопределенных изображений (например, progress_10_pct, progress_20_pct и т. Д.) , Или, как уже упоминали другие, просто используйте некоторую разметку HTML / CSS, чтобы создать видимость панели - выбор за вами.

2 голосов
/ 16 июля 2010

Вы можете сделать это с парой div с цветами фона и границ.

1 голос
/ 16 июля 2010

Если вы действительно хотите использовать PHP, вы можете использовать библиотеку gd - посмотрите на этот пример .

В противном случае я бы порекомендовал использовать только пару div-ов - 

<div class="bar_container">
    <div class="bar" style="width: <?= $percentage ?>%;">&nbsp;</div>
</div>
0 голосов
/ 16 июля 2010

Полностью с моей головы, так что будьте бдительны ... 

<head>
...
<style type="text/css">
#progressbar {
    display:inline-block;
    color:gray;
    width:50%;
}
#progressbar div {
    margin:0;
}
#progressbar > div {
    width:100%;
    border:1px solid #aaa;
}
#progressbar > div > div{
    background-color:green;
    width:<?php echo sprintf("%.0f", $u/$t); ?>%;
    height:20px;
}
</style>
</head>
...

Disk Space Usage <div id="progressbar"><?php echo "{$u} MB / {$t} MB"; ?><br><div></div></div>
0 голосов
/ 16 июля 2010

Для индикатора выполнения есть таблица с одной строкой и двумя столбцами.Отрегулируйте ширину в процентах от площади.

Кстати, мы используем OpenFlashChart .он позволяет вам создавать бар / круговую диаграмму / линию / разбросанные и т. д., и он очень прост в использовании.

0 голосов
/ 16 июля 2010

Вы можете использовать индикатор выполнения jQuery, чтобы сделать это легко http://jqueryui.com/demos/progressbar/

...