Визуализация на данни с CSS графики, графики и др

Доброто представяне на данни е важен аспект в уеб индустрията, защото това е ключът, който позволява на посетителите да разберат съдържанието ви в рамките на секунди. Колкото по-лесно или по-бързо посетителите ви дават представа за вашето уеб съдържание, толкова по-високо отразява вашия професионализъм в работата с презентацията. Критериите за достоверно представяне на данни трябва да бъдат прости, но описателни, добре разработени, но да успеят да поддържат интереса на потребителя, да не се потят, за да смилат съдържанието му, удобно да се сравни и накрая, потребителят трябва да може да взема решения или да сключва лесно представените данни. Колкото и трудно да звучат тези безумни критерии, това е възможно.

В днешния пост искаме да вземем вашето пътуване за различни подходи към красивите и творчески инструменти за визуализация на данни, които са изцяло базирани на CSS / HTML. да просто копирайте и поставете след това го персонализирайте според предпочитанията си. Тези графики могат да бъдат графични графики на CSS, които показват данни в хоризонтална / вертикална форма, падащ списък към данните ви за организиране или дори графики с линии и диаграми на кръговете!

Искаш повече? Продължете да превъртате!

Хоризонтален Barchart

Един прост начин за показване на статистическата фигура като преглед с тази достъпна диаграма с помощта на CSS. Лентата изчислява използваните клетки и етикети. Заглавията на таблиците, използвани за използване на звуков текст

CSSplay

Бар графиките са окончателен списък със стилове и класове, дефинирани във всеки ред. Първата диаграма има грешка, която се появява, когато стойностите се приближат до 100%, което се коригира във втората диаграма. Изходният код е включен за справка.

Процентна графика

С помощта на процентната ширина на CSS, в този урок се създава графика, базирана на проценти. В хоризонтална лента можете да зададете маркер да премине дължината отляво надясно или да създадете вертикална графика, като използвате същата техника и да я възпроизведете многократно.

Maxdesign

Ръс Уикли ви учи да създавате графика на базата на процент и използване на фонови изображения. Свързаните кодове и изображения могат да бъдат копирани и изтеглени, за да бъдат използвани във вашия проект.

Вертикална хартия

Създайте вертикални графики с помощта на CSS и PHP, като създадете прост списък с височина в пиксели на отделна лента, у-оста на групата и класа, за да оформите наборите от данни. Ерик Майер ви учи да превърнете същата в бар графика, линейна графика, посочена графика и 3D графика, като използвате същите техники

Чист CSS Linegraph

Линейните графики доставят информация много по-бързо от таблиците с числа. Научете как да създадете линейна графика с CSS, използвайки HTML, да замените текста с изображения и да използвате CSS спрайтове и абсолютно позициониране, за да получите линейна графика.

Проста линия

Много проста линейна графика, която използва само DHTML и CSS и където можете да зададете прозрачен фон за графиката. Тази графика се зарежда по-бързо и се смесва с останалата част от страницата.

Mgraph

Тази графика на Ajax се използва за представяне на данни за една година според всеки месец, като се използват само CSS и XHTML и се изпълнява във Firefox и Opera

Списъци с няколко колони

Пол Новицки ви учи да създавате многостранен списък с помощта на CSS в тази статия. Той обсъжда много техники за постигане на многобройни списъци с колони, като плаващите разделени списъци, номерирайки ги с атрибут HTML, CSS генерирано съдържание, опаковане на списъка с XHTML, CSS и т.н. списък перфектно.

Bulletgraph

Графиката на куршума сравнява една мярка с една или повече други мерки и показва качествения обхват на изпълненията. Те са доста гъвкави за сайтове, управлявани от данни. Научете се да създавате графичен куршум с помощта на CSS / HTML.

Барграф на колона

С помощта на CSS се създава колонна графика, като стойностите се показват в цветни вертикални ленти, достигащи до различни височини в съответствие с посочените стойности. Тази графика бързо ни дава ясна идея, защото стойностите се отпечатват директно тук. Използването на CSS селектори, спрайтове, стайлинг на списъци и т.н., се научи да създава графика на колона от урока.

Графика на престой

Графикът на прекъсване първоначално имаше проблем с показването на дълги интервали от време на ограничена площ на екрана и запазване на прозрачно оформление на събитията, което беше изяснено от месечната календарна парадигма. OnMouseOver () се поддържа и различни цветове се използват за различни типове събития при престой.

Динамичен CSS график

Динамична CSS графика за показване на времето за отговор на пинг, изпълняван от уеб сървър, чете данните от уеб сървъра с CSS и JavaScript код, AJAX функции и графично плъзгане..

Хоризонтален барграф

Бар графиката не е задължително винаги да е вертикална. Може да се създаде и хоризонтална лента. В тази статия се създава хоризонтална лента с различни цветови вариации, използвайки клас "хоризонтална графика" и посочваща височината на графиката от маркирането с помощта на CSS.

мултиграф

Линейна графика, която не използва таблици с изображения, се създава с CSS и DHTML, които се зареждат по-бързо и фонът може да се променя като прозрачен.

График на производствения план

Графиката на производствения план се създава с помощта на графичния клас като контейнер на графиката и hLine също vLine за рисуване на разделителни линии. Тази графика се използва в интранет приложения. Ширината на графиката се изчислява според показвания брой дни и височина, като се използва броят на промените в заданието.

Сандвич графика

Графиката за сандвич се създава, когато една лента в лентова графика се раздели на много слоеве, където височината на една колона може да показва глобален тренд, докато височината на един слой показва част от този слой. Създайте CSS сандвич графика от този урок.

Подреден барграф

За подредени графики се използва списък с дефиниции, за да се представят данни, след това маржовете и подложката се връщат отново, за да изглеждат еднакви във всички браузъри. Оси се добавят и стилизират, за да получат подредените решетки. Всеки детайл се преподава точно в този урок.

Обикновено барграф

Бар графика, създадена с помощта на CSS и PHP sans графична библиотека и без много изчисления, използвани за полета. Подложката прави доста лесно да се разбере техниката, която се използва само