Гистограммы на сайте - PullRequest
Новая
       23

Гистограммы на сайте

3 голосов
/ 14 июля 2009

Я ни в коем случае не веб-дизайнер, поэтому я хотел бы получить подробную помощь, какую вы готовы оказать.

Я бы хотел создать сайт, который бы отслеживал некоторые данные, которые я ввожу, используя гистограмму от 0 до 100%. Я бы вписал максимальное число, на которое мог бы пойти график, и затем некоторая точка данных могла бы периодически обновляться, что отражала бы гистограмма завершения.

Как бы я поступил так?

Я знаю основные HTML и PHP, но не использовал их в течение очень долгого времени.

Ответы [ 3 ]

9 голосов
/ 15 июля 2009

Я думаю, что большинство предложений излишни. Не нужно иметь дополнительную библиотеку / зависимость, когда все, что вам нужно, это несколько простых гистограмм. Простой HTML / CSS должен делать ...

PS: быстрый пример кода, протестирован только в Firefox 3.x 

<style type="text/css">
.bar
{
    background-color: green;
    position: relative;
    height: 16px;
    margin-top: 8px;
    margin-bottom: 8px; 
}
</style>

<div id="barcontainer" style="width:200px;">
    <div id="bar1" class="bar" style="width:43%;"></div>
    <div id="bar2" class="bar" style="width:12%;"></div>
    <div id="bar3" class="bar" style="width:76%;"></div>
    <div id="bar4" class="bar" style="width:100%;"></div>
</div>

Вы можете легко изменять ширину отдельных полос с помощью JavaScript (просто измените ширину).

6 голосов
/ 14 июля 2009

Я знаю, что вы сказали, что вы новичок, но вы должны взглянуть на API визуализации Google. У него есть что-то хорошее, что вы можете захотеть.
http://code.google.com/apis/visualization/

0 голосов
/ 14 июля 2009

Есть два способа решения этой проблемы; сгенерируйте график на бэкэнде (возможно, используя PHP в вашем случае) или сделайте это на стороне клиента с помощью javascript.

Я не уверен в специфике этого в PHP, так как я не очень хорошо знаю язык, но я уверен, что есть много информации о генерации графов в PHP.

Для подхода javascript ранее я использовал и flot (для jquery) и flotr (для прототипа). Мне они очень нравятся, и для обеих библиотек есть хорошая документация и примеры того, как генерировать все виды диаграмм, включая гистограммы.

...