Графік, побудований з використанням лише CSS
Метою даного уроку є не лише надати можливість візуалізувати дані людям, які з якихось причин не можуть скористатися якоюсь скриптовою мовою. Також демонструються можливості CSS із несподіваного боку.
Як може бути корисним лінійний графік? Користувачі, які переглядають вашу сторінку, часто не враховуються в кожне слово. Лінійний графік представляє інформацію в набагато доступнішій і легкій для сприйняття формі.
Як це все працює?
Даний метод складається з наступних дій: беремо структурований HTML, замінюємо текст зображенням, і за допомогою CSS спрайтів та абсолютного позиціонування створюємо імітацію лінійного графіка. Використовується елемент dl. Елемент dl стилізується так, щоб представляти координатну систему, в якій розміщуємо пункти графіка . Порожній елемент dl повинен мати такий вигляд:
Розміри, які використовуються для фонового графіка, визначають розміри, які ми використовуємо для вкладених елементів, щоб усе добре заповнювалося. У нашому випадку кожен пункт графіка становить один день. Для пунктів графіка ми використовуємо елементи dd із пов'язаними елементами span. Ми форматуємо та розміщуємо елементи dd так, що вони формують лінію стовпчиків по всьому графіку.
Стиль для пов'язаних елементів span дає можливість побудувати лінійний графік.
Принцип побудови графіка
Концепція може бути складною. Але якщо ви уважно розберетеся в деталях, побачите, що логіка досить проста. У прикладі елемент dd має 33 px завширшки і 330 px заввишки. Кожен із цих елементів представляє один "рух лінії" від попередньої точки до наступної . Ми використовуємо одне зображення, спрайтCSS, яке має всі можливіположення графічного відображення. На зображенні видно, що в спрайте є лінії, які йдуть вгору (зростаючі значення) і вниз (зменшувані значення). Встановлюючи для пов'язаного span властивість положення фону певне значення, ми вибираємо одну з опцій для "лінії" .
Але це ще не все. Також нам потрібно встановити "стартову позицію" для кожного елемента, оскільки лінія завжди починається на іншому значенні. Це виконується за допомогою налаштування верхнього значення для кожного span.
Тому, кожен span має 2 (насправді деякі мають 3, про що буде сказано нижче) пов'язаних імені класу : одне визначає "стартову точку" (верхнє значення span ), а інше представляє висхідний або спадаючий "рух лінії" (значення положення фону span). Стартова точка базується на попередньому значенні. Продовжувати треба з місця, де зупинився попередній пункт графіка.
Реалізація
Якщо подивитися у файл CSS, то можна побачити 4 групи імен класів : 2 призначені для встановлення стартової точки і 2 для визначення "руху". нижня частина зображення) значення пункту графіка. Імена класів є відповідно.pi1 або.pd1. Група .pi має негативні значення, які зсувають спрайтове зображення вгору, а група .pd має позитивні значення (для зсуву вниз).
Дійсний рух лінії визначається іменем класу.i1 або.d1. Тобто, ім'я класу.i24 означає збільшення значення24 одиниці.
Вибрати правильне положення (".p" клас) дуже просто: потрібноподивитись напопередній пункт графіка, який буде, наприклад, таким:
Тут вказаноpi1 таi10. Це означає, що стартова точка 1 та збільшення на 10 одиниць. Що з обчисленні дає значення 11 длянової стартової точки. Якщо наступний рух лінії збільшується, то ми вибираємо .pi11, а якщо зменшується — .pd11!
Якщо все сказане складно звучить, просто пам'ятайте, що змішувати використання імен класів з i і d не можна.
Тепер розберемося з елементами em. Пункти графіка поміщаються один за одним без перекриття, таким чином, з'єднання ліній не дуже плавні. Елементи em використовуються для розміщення точки поверх з'єднання ліній, щоб замаскувати його. Елементи em позиціонуються абсолютно для маскування попереднього з'єднання ліній. Існує одне визначення CSS за умовчанням для елементів em, хоча ділянки, що зменшуються, потребують додаткового імені класу.d. Тому деякі елементи span мають 3 імені класу. Ділянки, що вміщаються, маркуються наступним чином:
Імена класів, написані в "точках" або "кроках" не є дійсними значеннями. У прикладі кожна "точка" становить 3,3%