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

StackOverflow https://stackoverflow.com/questions/1127426

  •  13-09-2019
  •  | 
  •  

Вопрос

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

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

Как бы я это сделал?

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

Это было полезно?

Решение

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

ПС:краткий пример кода, протестирован только в 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 (просто измените ширину).

Другие советы

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top