Построение HTML диаграмм

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем serg450453, 26.12.2010.

  1. Offline

    serg450453 Пользователь

    Регистрация:
    23.12.2010
    Сообщения:
    48
    Симпатии:
    0
    Пол:
    Мужской
    Всем добрый день, хочу на на сайте использовать HTML диаграммы, наподобие таких как здесь

    http://www.overclockers.ru/lab/39760_2/Obzor_videokart_AMD_Radeon_HD_6950_i_HD_6970_chast_1.html#10

    если кто знает по лучше или по проще прийму любые предложения

    заранее благодарен
     
  2.  
  3. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    тут на основе таблиц. Вычисляется ширину столбца в % и генерируется график. И еще там JS используется. Сложного там ничего нет.
     
    Последнее редактирование: 26.12.2010
  4. Offline

    serg450453 Пользователь

    Регистрация:
    23.12.2010
    Сообщения:
    48
    Симпатии:
    0
    Пол:
    Мужской
    дело в том что для меня это ещё новое, где можно более детально почитать, желательно с примерами
     
  5. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    Где можно почитать, сказать не могу. Это основы HTML + JavaScript, если график динамический, то + PHP. Смысл надо главное уловить.

    Необходимо вычислить, чему будет равен 1% ширины таблицы. Например, если 1% = 1 ед. а у нас есть данные, 30, 25, 10 и 20, 40, 15 то будем иметь код
    Код (CODE):
    1. <table>
    2.   <tr style="height: 20px">
    3.   <td width="30%" style="background: #9ACAF2">30</td>
    4.  
    5.   <td width="25%" style="background: #1E69A8">25</td>
    6.  
    7.   <td width="10%" style="background: #008AFF">10</td>
    8.  
    9.   <td width=""></td>
    10.   </tr>  
    11.    </table>
    12.   <table>    
    13.   <tr style="height: 20px">
    14.   <td width="20%" style="background: #9ACAF2">20</td>
    15.  
    16.   <td width="40%" style="background: #1E69A8">40</td>
    17.  
    18.   <td width="15%" style="background: #008AFF">15</td>
    19.  
    20.   <td width=""></td>
    21.   </tr>  
    22.   </table>


    Выходит 4 столбика, первые три - значение, последний - пустое место. Тут можно использовать не толдько таблицы, но и другие элементы HTML
     
  6. Offline

    serg450453 Пользователь

    Регистрация:
    23.12.2010
    Сообщения:
    48
    Симпатии:
    0
    Пол:
    Мужской
    Я скопировал данный код но что то графика там нет.
     
  7. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    у Вас он выглядит как на скрине? Это просто пример, до полноценного графика еще далеко:)
     

    Вложения:

  8. Offline

    serg450453 Пользователь

    Регистрация:
    23.12.2010
    Сообщения:
    48
    Симпатии:
    0
    Пол:
    Мужской
    Вот в том оо и дело что для меня этоо все новое, и мне нужно весь курс постройки графиков
     
  9. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    это была просто подсказка, пример. Еще посидеть и все получится. Советую начать изучение PHP+HTML+JS+CSS или заказать создания графика
     

Поделиться этой страницей

Загрузка...