Как сделать диаграмму html

Графики и диаграммы

На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.

Набор возможных графиков доступен на этой странице. Для каждого графика есть множество параметров, которые позволяют настроить всё по своему вкусу: цвета, положение, заголовки, анимацию и многое другое. Можно обойтись и минимальным набором, если нет желания вдаваться в эти тонкости или когда полностью устраивает стандартный вид графика.

Рассмотрю только два типа графиков — круговую и линейную диаграмму. Остальные типы подключаются по аналогии и разобравшись как добавлять один график, уже легче работать и с другими.

Круговая диаграмма

Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.

В примере 1 показан код для отображения состава воздуха в виде круговой диаграммы.

Пример 1. Круговая диаграмма

Результат примера показан на рис. 1.

Рис. 1. Вид круговой диаграммы

В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.

Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.

Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.

Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Гистограмма

Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.

Принцип создания этого типа диаграммы аналогичен предыдущему — добавляем тег

Пример 2. Гистограмма

Для начала добавляем тег

Резюме

Удобно, что сервис ориентирован на пользователей разного уровня подготовки. Можно скопировать прилагающиеся примеры и сразу же получить готовый график стандартного вида. Те пользователи, что станут досконально разбираться во множестве параметров, будут вознаграждены графиками сделанными по их вкусу и подобию дизайна сайта.

Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.

Документация сервиса на русский язык не переведена и доступна только на английском, что способно отпугнуть некоторых пользователей. На это есть только одна мантра — учите языки.

Источник

Использование HTML-таблиц для вывода диаграмм

Введение

При разработке некоторых видов скриптов, в частности — скриптов голосований, бывает желательно организовать в них наглядный вывод тех или иных статистических данных в виде диаграммы.

Обычно «графический» вывод CGI-скрипта организуется путем формирования скриптом рисунка в одном из форматов веб-графики (чаще всего GIF или PNG) и вставки ссылки на этот рисунок на выводимую HTML-страничку.

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

Все это осложняется еще и тем, что алгоритм сжатия данных LZW, используемый в GIF, является в настоящее время патентованным и небесплатным для использования. Иными словами, разработчики «железа» и ПО, которые используют данный алгоритм, должны платить патентные отчисления фирме-держателю патента. А поскольку такой порядок вещей совершенно неприемлем для разработчиков бесплатного ПО, то разработанные графические библиотеки либо вовсе не поддерживают формат GIF, либо поддерживают только формирование «несжатых» GIF-файлов.

Однако обязательно ли для вывода диаграмм на HTML-странице использовать «настоящую» графику? Нет ли «альтернативных способов»? И вообще, является ли использование графики лучшим и оптимальным путем вывода диаграмм?

В этой статье я предлагаю «альтернативный способ» вывода столбчатых (линейных) диаграмм, основанный на HTML-таблицах. Этот способ, по моему мнению, отличается сравнительной (а по сравнению с формированием графики — значительной) простотой реализации и хорошим качеством «результата».

Теория

Как известно, язык HTML позволяет управлять практически всеми параметрами таблиц. Суть предлагаемого метода заключается в том, что HTML-таблицу можно «сформировать» таким образом, что она будет выглядеть как вполне приличная диаграмма.

При этом разработчик ценой минимальных усилий может придать диаграмме практически любой вид — изменить цвета столбцов (или даже залить их рисунком), их ширину, расстояние между ними и т.д. Можно даже написать на столбцах текст. Причем все это делается только лишь изменением параметров и содержимого ячеек выводимой таблицы, а вся «техническая» нагрузка по формированию на экране пользователя таблицы нужного вида ложится на «плечи» броузера.

Выводимая диаграмма может быть горизонтальной или вертикальной. Далее мы в этой статье будем рассматривать горизонтальные диаграммы как наиболее простые и более наглядно иллюстрирующие идею.

Поскольку в горизонтальной диаграмме каждый столбец диаграммы представлен строкой таблицы, то далее, чтобы не внести путаницы, столбец таблицы я буду называть «столбец», а столбец диаграммы — «столбик». 🙂

Вывод CGI-скрипта, формирующего такую диаграмму, может быть вставлен в страницу с помощью SSI или IFRAME. При этом надо иметь в виду, что диаграмма, вставленная на страницу через SSI, является частью самой страницы и, следовательно, сохраняется/отображается/кэшируется вместе с ней. В одних случаях это преимущество, в других — недостаток. Еще одним недостатком этого метода (на практике — не очень существенным) является то, что таблицу, в отличие от рисунка, нельзя масштабировать.

От теории к практике

Итак, как же нужно сделать таблицу, чтобы она выглядела как диаграмма?

В простейшем случае в качестве диаграммы можно построить таблицу с двумя ячейками в каждой строке. Первая ячейка будет собственно столбиком диаграммы (она видима и отображается нужным цветом или background-ом), а вторая — невидимая. Как известно, броузер отображает только те ячейки таблицы, у которых есть содержимое (непустые). Поэтому для того, чтобы сделать видимой первую ячейку-«столбик», в нее нужно поместить, по крайней мере, символ

Общая ширина этих двух ячеек для каждой строки должна быть одинакова (ширина таблицы), а количество строк соответствует количеству столбиков диаграммы (числу отображаемых значений).

И тут начинаются наши первые «подводные камни» на светлом пути к великой цели :-). Дело в том, что броузер не может «просто так», без ухищрений, построить таблицу, у которой в каждой строчке значения ширины столбцов разные! Для каждой выводимой таблицы броузер вычисляет ширины столбцов (одинаковые для каждой строки) и высоты строк (одинаковые для каждого столбца).

Из этого положения есть два выхода:

Во втором случае необходимо построить таблицу, у которой ширины столбцов соответствуют разности между соседними по величине отображаемыми значениями, а нужную ширину видимой ячейки-«столбика» в каждой строке получать «распространением» первой ячейки на нужное количество столбцов.

Пример: для отображения диаграммы со столбиками 100, 300 и 400 пикселей нам нужно построить таблицу с ширинами столбцов 100, 200 и 100. Первый столбик диаграммы «займет» один столбец таблицы, второй — два и третий — три. Соответственно, вторая, невидимая ячейка займет столько столбцов, сколько осталось.

Соответственно, программный код по формированию «таблицы-диаграммы» должен включать в себя алгоритм сортировки отображаемых значений и вычисления нужных ширин столбцов таблицы.

Пример скрипта

А теперь рассмотрим практический пример скрипта для «табличного» вывода диаграммы.

Т.к. приведенный здесь программный код в качестве исходных данных использует уже «готовые» значения в пикселах (а не собственно выводимые величины в их исходном виде), то перед его использованием необходимо преобразовать выводимые величины (скажем, проценты) в количества пикселей с учетом желаемой ширины диаграммы.

Управление толщиной столбцов

В ряде случаев Вам может понадобиться явно задать толщину столбиков диаграммы, т.е. высоту строк таблицы. И здесь Вам встретится еще один «подводный камень» данного решения. Дело в том, что параметры width и height тэгазадают не однозначные, а минимальные значения ширины и высоты ячейки таблицы. Т.е. если «по содержимому» ячейка меньше, чем указано в параметрах width и height, то она «растягивается» до нужных размеров.

Наш пример вообще не задает в тэгахпараметр height, поэтому высота ячеек таблицы определяется размерами шрифта, которым «написан» символ в видимой ячейке (несмотря на то, что это символ пробела, он, как и любой другой символ, имеет свою высоту) и отступом между «абзацем» и границами ячейки. Соответственно, если не принять дополнительных мер, то на разных страницах и у разных посетителей выглядеть несколько по-разному.

«Общим видом решения» этой задачи является минимизация собственной высоты ячейки и задание ее высоты с помощью параметра height тэга.

Самым «радикальным» способом уменьшения высоты является помещение в видимую ячейку вместо & нетекстового содержимого, скажем, картинки размером 1×1 пиксель:

а в trans.gif поместить прозрачное изображение в 1 пиксель.

Тогда «собственная» высота ячеек получится очень мала (несколько пикселей) и параметром height и Вы сможете однозначно задавать высоту ячеек таблицы-диаграммы, а следовательно, и толщину столбиков.

Еще одним способ уменьшить «собственную» высоту ячеек — максимально уменьшить размер шрифта в «видимой» ячейке.

Источник

15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц

Практически невозможно представить себе информационную панель без диаграмм и графиков. Они быстро и эффективно отображают сложные статистические данные. Более того, хорошая диаграмма также улучшает общий дизайн вашего сайта.

В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.

Хотя большинство библиотек являются бесплатными и свободно распространяемыми, для некоторых из них есть платные версии с дополнительным функционалом.

D3.js – документы, ориентированные на данные

Сегодня, когда мы задумываемся о графиках, то первое, что приходит в голову – это D3.js Являясь open source проектом, D3.js, вне всякого сомнения, дарит много полезных возможностей, которых не хватает большинству существующих библиотек. Такие возможности как “Enter and Exit”, мощные переходы, и синтаксис, схожий с jQuery или Prototype, делают его одной из лучших JavaScript библиотек для создания графиков и диаграмм. В D3.js они генерируются посредством HTML, SVG и CSS.

В отличие от многих других JavaScript библиотек, D3.js не поставляется с заранее созданными графиками прямо из коробки. Однако вы можете взглянуть на перечень графиков, созданных на D3.js, чтобы получить общее представление.

D3.js не работает должным образом со старыми браузерами, такими как IE8. Но вы всегда можете применить такие плагины как aight plugin для кроссбраузерной совместимости.

D3.js ранее широко использовался на таких вебсайтах как NYTimes, Uber и Weather.com

Google Charts

Google Charts – JavaScript библиотека, которую я регулярно использую для простого и лёгкого создания графиков. Предоставляет множество предварительно созданных диаграмм, таких как комбинированные гистограммы, столбчатые диаграммы, календарные графики, секторные диаграммы, гео схемы, и др.

В Google charts также имеется множество конфигурационных настроек, которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.

Вот замечательный список с примерами, построенными на Google charts.

ChartJS

ChartJS наделяет графики красивым плоским дизайном. Он использует HTML5 canvas для рендеринга. Поддержка для старых браузеров, таких как IE7/8, добавляется с помощью полифилла.

Графики ChartJS отзывчивы по умолчанию. Они отлично работают на мобильных устройствах и планшетах. Благодаря 6 основным разновидностям графиков прямо из коробки (core, столбчатый, кольцевой, лепестковый, линейчатый и полярный), ChartJS определённо является одной из наиболее впечатляющих open source библиотек для построения графиков и диаграмм, за последнее время.

Chartlist.js

Chartlist.js предоставляет красивые отзывчивые графики. Также как и ChartJS, Chartlist.js является результатом труда сообщества, которое разочаровалось в дорогих диаграммных библиотеках JavaScript. Он использует SVG для рендеринга графиков/схем. Может управляться и конфигурироваться посредством CSS3 media queries и Sass. Также, примите к сведению, что замечательная анимация, предоставляемая Chartlist.js, будет работать только в современных браузерах.

n3-charts

Если Вы – AngularJS разработчик, то n3-charts определённо вам покажется необычайно полезным и интересным. n3-charts создан поверх D3.js и AngularJS. Он предоставляет множество стандартных графиков в виде настраиваемых AngularJS директив.
Ознакомьтесь с перечнем графиков, созданных с помощью на n3-charts.

Ember Charts

EmberCharts – ещё один великолепный open source репозиторий, построенный на D3.js и Ember.js Предоставляет легко настраиваемые графики временного ряда, гистограммы, секторные диаграммы и диаграммы рассеяния. Использует SVG для рендеринга графиков.

Smoothie Charts

Если вы имеете дело с потоком данных в реальном времени, то вам может пригодиться Smoothie Charts. Для рендеринга графика здесь используется элемент HTML5 canvas. Это библиотека на чистом JavaScript, которая предоставляет такие опциональные возможности для графиков реального времени как задержка и вспышка цвета.

Chartkick

Chartkick – JavaScript библиотека для построения графиков/схем в Ruby приложениях. Предоставляет все основные типы диаграмм, такие как секторная, столбчатая, гистограмма, комбинированная гистограмма, гео, временная и диаграмма кратного ряда. Диаграммы генерируются через SVG.

MeteorCharts

Вы ещё не пробовали работать с Meteor v 1.0? Ладно, MeteorCharts поможет вам в создании красивых диаграмм для Meteor приложений. Для рендеринга графиков предоставляется возможность выбора любой из этих технологий: HTML5 canvas, WebGL, SVG и даже DOM.
Это замечательный генератор графиков, который позволяет вам выбрать его тип, тему, а затем выполнить генерацию. Бесплатен для использования в некоммерческих проектах. Подсчитать стоимость коммерческой лицензии можно здесь.

Highcharts JS

Highcharts JS – ещё одна весьма популярная библиотека для построения графиков. Комплектуется большим количеством анимации разнообразного типа, способной привлечь множество внимания к вашему сайту. Как и другие библиотеки, HighchartsJS содержит множество предварительно созданных диаграмм: сплайновых, фигурных, комбинированных, столбчатых, гистограмм, круговых, точечных и пр.

Одно из самых больших преимуществ применения HighchartsJS – совместимость со старыми браузерами, такими как Internet Explorer 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.

Хотя HighchartsJS и бесплатен для персонального использования, вам необходимо приобрести лицензию для коммерческого применения.

Fusioncharts

Fusioncharts – одна из наиболее старых JavaScript библиотек, которая была впервые выпущена в 2002 году. Графики генерируются посредством HTML5/SVG и VML для лучшей портируемости и совместимости.

В отличие от множества библиотек, Fusioncharts предоставляет возможность парсинга как JSON данных, так и XML. Вы также можете экспортировать эти графики в 3 разных формата: PNG, JPG и PDF.

Fusioncharts хорошо совместим со старыми браузерами, такими как IE6. И по этой причине он стал одной из наиболее предпочитаемых библиотек во множестве торговых организаций.

Вы можете бесплатно использовать версию Fusioncharts с водяным знаком как в личных так и в коммерческих проектах. Однако, вам необходимо приобрести лицензию, чтобы избавиться от водяного знака.

Flot – JavaScript библиотека для JQuery, позволяющая создавать графики/диаграммы. Одна из старейших и наиболее популярных диаграммных библиотек.

Flot поддерживает линейчатые, точечные, гистограммы, столбчатые и любые комбинации из этих видов диаграмм. Также совместим со старыми браузерами, такими как IE 6 и Firefox 2.

Flot полностью бесплатен, коммерческая поддержка предоставляется по специальному запросу разработчику. Вот список примеров с графиками, созданных на Flot.

amCharts

amCharts, несомненно, одна из наиболее красивых диаграммных библиотек. Она в полной мере разделилась на 3 независимых вида: JavaScript Charts, Maps Charts (amMaps) и Stock charts.

amMaps – мой любимый из этих трёх, что указаны выше. Предоставляет такие возможности, как теплокарты, рисование линий, добавление текста на карту, загрузка иконок или фотографий в верхнюю часть вашей карты, изменение масштаба и пр.
amCharts использует SVG для рендеринга графиков который работает только в современных браузерах. Графики могут не правильно отображаться в IE ниже 9й версии.

Бесплатная версия amCharts будет оставлять обратную ссылку на этот вебсайт в верхней части каждого графика. Коммерческие лицензии слегка дороже большинства платных библиотек на рынке.

EJSChart

EJS Chart заявляют о своём практичном решении для предприятий. Графики выглядят аккуратней и читабельней чем большинство других из более старых библиотек. Также имеется совместимость с IE6+ и другими старыми браузерами. Ознакомьтесь с этим списком примеров.

EJS Chart предоставляется в бесплатной и платной версиях. Бесплатная версия имеет ограничение, не позволяющее вам использовать более 1 графика на странице и более двух (числовых) последовательностей на графике. Ознакомьтесь с ценовыми подробностями здесь.

uvCharts

uvCharts – JavaScript библиотека с открытым исходным кодом, заявляется о наличии более 100 конфигурационных опций. У неё имеются графики 12 различных стандартов прямо из коробки.

uvCharts построен на D3.js библиотеке. Этот проект обещает устранить все сложные нюансы кодинга D3.js и обеспечить лёгкую реализацию графиков стандартного вида. uvCharts генерируется посредством SVG, HTML и CSS.

Заключение

Теперь выбор наилучшей диаграммной библиотеки для своих будущих проектов остаётся только за вами. Разработчики, которым нужен полный контроль над графиками, определённо выберут D3.js Практически все вышеуказанные библиотеки обзавелись хорошей поддержкой на форумах Stackoverflow.

Если вы ищите инструменты для генерации уже готовых графиков, то перейдите к статье 5 Инструментов Для Создания Удивительных Онлайн Графиков. Вы также можете прочесть Создание Простых Линейных и Столбчатых Диаграмм с Помощью D3.js, для того чтобы начать знакомство с D3.js. Также у нас есть выпуски, посвящённые GoogleCharts с AngularJS.

Надеюсь вам понравилась эта статья. Хорошего дня.

Источник