Чому на canvas?
Існує безліч способів створення графіків в мережі, а особливо на canvas. Проте, Sara Soueidan радить уникати цього методу:
«HTML5 Canvas теж можна використовувати для створення візуалізації, проте генерований контент не є частиною DOM і до нього не можна отримати доступ. Для вирішення даної проблеми, вам би довелося дублювати контент між відкриває і закриває тегом canvas. Таке рішення також забезпечує фоллбек для старих браузерів. Також доведеться зв'язати фоллбек контент з полотном, щоб при взаємодії елементи реагували правильно. Так що в HTML5 Canvas нам буде потрібно продублювати весь контент [. ] А в SVG ви відразу отримуєте семантичного та доступність разом з інтерактивністю на JS прямо з коробки. »
Але крім полотна є й інші способи. Наприклад, Filament Group написали JQuery плагін під назвою Visualize. який збирають всю інформацію з таблиці table і на основі отриманих даних створює графік. Даний метод має місце, навіть якщо в таблиці всього один елемент.
Чому SVG?
Формат SVG призначений не тільки для іконок або простих зображень. У нього є свої переваги для створення графіків. У нашому Гайд по SVG ми описали основні переваги даного формату так:
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Маленький розмір файлів з хорошим стисненням
Повна масштабованість (крім зовсім крихітних розмірів)
Дуже добре підходить для ретина дисплеїв
Взаємодія і фільтри
А також можна додати два ключові переваги, які будуть корисні для графіків:
SVG доступний в браузерах (доведеться зовсім небагато попрацювати)
Для допомоги можна подивитися безліч SVG фреймворків призначених для створення графіків
Почнемо. Як же найпростіше створити графік на SVG?
Графіки за допомогою img
Створювати графіки в SVG так само легко, як і в Illustrator або в іншому векторно-орієнтованому додатку, потім експортувати це в SVG і вставити в розмітку через тег img:
Це досить-таки хороший спосіб, плюс зображення добре масштабується. Але все ж ми втрачаємо більшість переваг вбудованого SVG, в тому числі доступ через DOM і взаємодія. Браузери Ніяк не зчитують такі графіки, зчитується тільки атрибут alt, а також втрачається взаємодія з мишкою, тачскріном або клавіатурою.
Всі ці проблеми наштовхують на пошук іншого способу вставки SVG в розмітку сторінки. Наприклад, що, якщо вчинити так само, як в проекті Death from Above. Використовуваний там спосіб взаємодії з графіками допоможе нам все зрозуміти.
Щоб домогтися максимуму від SVG, необхідно взяти весь код з цього прикладу і вставити його до себе на сторінку. Графи (вершини графіків) можна стилізувати за допомогою CSS, змінити інтерактивність за допомогою JS - так ми вичавимо всі переваги від вбудованого SVG.
(Домогтися таких же результатів можна за допомогою object або iframe, концепції дуже схожі. Але розглянемо докладніше інлайновий SVG.)
стовпчасті діаграми
Кожна колонка графіка це тег
Спозиционировать елементи rect і text можна за допомогою координат x / y:
Зверніть увагу, при наведенні на графік змінюється колір стовпчика і тексту. Керувати цим можна за допомогою CSS властивості fill:
Інфокрівие
Так як інфокрівие багато в чому це крихітні гістограми, то ми запозичимо більшість коду з попереднього прикладу:
Цього разу щоб вирівняти групи
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
лінійні графіки
Тег polyline допоможе нам задати лінії, а атрибут points - точки вершин:
0,120 значить 0 зліва і 120 зверху на полотні SVG. Коли ми визначилися з вершинами графіка, можна задати ширину лінії за допомогою stroke-width, колір лінії за допомогою stroke:
Але це тільки стилі графіка - а що щодо основних ліній, що допомагає зрозуміти, що до чого? Що з приводу осей?
Створення осей і написів
Roemer Vlasveld написав відмінну статтю про створення графіків на SVG. Він задокументував пару цікавих властивостей, які допоможуть нам створити написи і стилізувати осі графіків. Ми відтворимо спрощену версію його прикладу:
кожна група
Додавши в іншу групу всі крапки за допомогою елемента circle, можна подивитися, що вийде:
кругові діаграми
Ми вже кілька разів згадали статтю Lea Verou про кругових діаграмах, так як це відмінний приклад. З нього ми і почнемо. Не буду заново пояснювати її техніку тут, хоча було б цікаво подивитися, як можна взаємодіяти з круговими діаграмами в SVG. Нижче готовий приклад, щоб ви зрозуміли, до чого ми прагнемо:
При натисканні на кнопки над самим графіком, він оновлюється. Значення беруться з JS об'єкта. У цьому методі також є свої проблеми з доступністю, але я загострю увагу на взаємодії з допомогою JS і SVG. Спочатку, розмітка:
Тепер поставимо дані про населення:
Необхідно заповнити порожні блоки .buttons кнопками, при натисканні на які буде змінюватися властивість stroke-dasharray для SVG елементу circle. Кнопки можна створити так:
Тепер виправимо відсотки: asia: 60 в об'єкті continents значить 60 від 100 відсотків, а не від окружності. Створимо функцію для цього:
Тепер додамо обробник події до кожної кнопки, створимо функцію setPieChart (). Дана функцію змінює значення stroke-dasharray, перевіряє атрибут data-name кожної кнопки і знаходить відповідну інформацію:
Додавши ці допоміжні функції, отримуємо готову кругову діаграму:
Анімація в попередніх прикладах була задоволена проста, все, що ми робили, це використовували властивість transition:
Після того, як ми змінили значення властивості за допомогою скрипта, решту роботи за нас робить CSS. А якими ще SVG властивостями і атрибутами можна маніпулювати через CSS?
Особливість стилізації SVG за допомогою CSS в тому, що ми можемо контролювати тільки деякі властивості. Наприклад, якщо ми хочемо змінити x або y координати, або групу
У W3C є корисний список. які властивості впливають на конкретні елементи SVG. Так що двічі перевірте, перш ніж застосовувати властивість CSS до певного елементу.
Редагування SVG вручну не найкращий спосіб
З такими базовими формами, як rect, line і polygon можна створити будь-який тип SVG графіків. Справжня проблема в іншому: а чи потрібно нам це? Наприклад, лінійні графіки ще можна створити вручну, але я б не рекомендував це робити. Синтаксис злегка складний, особливо, якщо необхідно створити криві лінії.
Писати SVG вручну дуже повільний і неприємний процес. Навіть при створенні простих графіків, буде потрібно ціла вічність, щоб написати код і перевіряти позиції кожного елемента графіка. Так само, як і при створенні графіків на чистому CSS, написання SVG вручну дуже болісний процес, якщо ви, звичайно, не створюєте зовсім маленький графік. Повинен же бути інший, більш зручний спосіб?
Фреймворки в допомогу!
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі