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

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

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

• Широкий выбор параметров графиков и диаграмм.
• Большая палитра цветов.
• Управление заголовками и многое другое.

Перейдите на сайт сервиса → выберите диаграмму или график нужного формата → скопируйте HTML-код → подставьте свои параметры. Например:

var data = google.visualization.arrayToDataTable([

[‘CMS’, ‘Сайты на базе систем управления контентом’],

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

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

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

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

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

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

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

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

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

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

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

Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .

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

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

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

Гистограмма

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

Рис. 2. Гистограмма

Принцип создания этого типа диаграммы аналогичен предыдущему — добавляем тег , связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).

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

Для начала добавляем тег и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент . Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей — собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.

Резюме

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

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

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

Как создавать анимированные графики и диаграммы в Visme

Визуализация данных в виде графиков и диаграмм – это эффективный способ заинтересовать аудиторию и сделать информацию доступной для восприятия.

Тем не менее, статичной диаграммой сегодня никого не удивить. Чтобы оживить презентацию и привлечь внимание зрителей, попробуйте не только визуализировать, но ещё и анимировать ваши данные.

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

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

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

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

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

Видеоурок: как создавать графики и диаграммы в Visme

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

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

Ниже вы можете прочитать наше подробное руководство со скриншотами.

Как создавать анимированные графики и диаграммы в Visme

Чтобы создавать анимированные графики и диаграммы, не обязательно использовать сложные программы или заказывать эти услуги у профессионалов – в редакторе Visme это можно сделать самостоятельно и всего за несколько кликов.

Прежде чем читать это руководство, мы советуем вам зарегистрировать бесплатный аккаунт в Visme. Так вам будет проще следить за нашей инструкцией, и вы сразу сможете применить ее на практике.

1 Выберите шаблон или создайте новый проект.

Войдите в личный кабинет Visme. Вы увидите главную панель, где сохранены все ваши текущие и прошлые проекты. Здесь же можно создать новый проект.

На боковой панели слева нажмите кнопку Create (Создать).

Вы можете выбрать готовый шаблон или начать с чистого листа.

Найдите идеальный шаблон для вашей анимированной диаграммы! Выбрать шаблон

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

Если вы хотите создать отчет с разными типами диаграмм, откройте категорию Documents → Reports (Документы → Отчеты) и выберите один из подходящих шаблонов.

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

2 Добавьте данные.

В редакторе Visme вы можете создать новую диаграмму, открыв на панели слева вкладку Data (Данные), или отредактировать диаграмму в шаблоне, нажав на нее.

При любом из этих действий на макете появится инструмент редактирования диаграмм, а на боковой панели слева – таблица для ввода данных. Введите нужные данные в эту таблицу.

Создайте диаграмму на основе этого шаблона! Редактировать и скачать

Это можно сделать любым из следующих способов:

• Ввести данные вручную. Наберите данные или скопируйте их из другой таблицы и вставьте.
• Загрузить таблицу в редактор. Импортируйте файл Excel или файл в формате CSV
• Подключить таблицу Google. Получайте данные из таблицы Google в реальном времени.

В этой статье вы найдете подробные сведения о том, как импортировать данные и подключать таблицы.

3 Выберите тип анимированной диаграммы.

Выберите тип диаграммы или графика, который поможет наглядно показать ваши данные.

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

Создайте анимированную диаграмму сегодня! Попробовать бесплатно

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

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

4 Добавьте ещё один набор данных для сравнения.

Это необязательный шаг, но при необходимости вы можете добавить дополнительные наборы данных и сравнить их с первым набором, используя анимированную диаграмму.

Просто добавьте дополнительные ряды данных под имеющимися.

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

Посмотрите, как к диаграмме автоматически добавляется анимация.

5 Выберите цвета для анимированной диаграммы.

Когда вы добавите все нужные данные, можно перейти к настройке внешнего вида графика или диаграммы.

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

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

ЕЩË ПО ТЕМЕ: 50 Beautiful Color Combinations (And How to Apply Them to Your Designs)

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

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

6 Настройте анимированную диаграмму.

Когда вы выберете цветовую схему, настройте другие элементы, такие как заголовок и подзаголовок диаграммы или графика.

Создайте анимированную диаграмму сегодня! Попробовать бесплатно

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

Ещё можно выбрать разные стили анимации или просто отключить ее.

7 Посмотрите, как будет выглядеть ваша диаграмма.

Теперь пришло время проверить, довольны ли вы тем, что получилось. Нажмите на кнопку Present (Показать) вверху экрана, чтобы посмотреть презентацию.

Найдите идеальный шаблон для вашей анимированной диаграммы! Выбрать шаблон

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

8 Опубликуйте или скачайте диаграмму.

Чтобы опубликовать анимированную диаграмму и поделиться ей с коллегами, просто нажмите на кнопку Share (Поделиться) вверху экрана.

Выберите подходящий вариант:

• Publish for the web (Опубликовать для сети). Ваша анимированная диаграмма будет доступна в поиске Google, и вы сможете поделиться ей с коллегами, отправив им ссылку.
• Share privately (Поделиться по ссылке). Вы получите приватную ссылку на проект и сможете поделиться ей с коллегами, отправив ссылку по электронной почте или другим способом .
• Embed (Встроить). Вы получите код для встраивания анимированной диаграммы на сайт (адаптивный или с фиксированной шириной).

Если вы хотите загрузить проект в виде статичного изображения, скачайте его в формате JPG, PNG или PDF. Если же вы не хотите терять анимацию, проект можно скачать в формате HTML5.

Создайте анимированную диаграмму в Visme

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

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

Если вы еще не пробовали создавать проекты в Visme, зарегистрируйтесь бесплатно и пользуйтесь нашим сервисом в течение неограниченного времени.

Мы будем рады узнать ваше мнение о нас. Просто оставьте комментарий ниже, и мы свяжемся с вами!

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

онлайн-редактор графиков с предварительным просмотром

* Бесплатно не требуется регистрация или загрузка

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

Графики

Дни

Как это устроено

Введите данные

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

Настроить диаграмму

Изменить тип диаграммы, цвета, тексты, шрифты, границы, фон, стиль линий, оси, условные обозначения .

Сохранить и поделиться

Сохраните диаграмму как изображение или веб-страницу (анимированную) или сохраните в Интернете, чтобы получить доступ отовсюду, или поделитесь с друзьями

Характеристики

Предварительный просмотр

Предварительный просмотр графика в реальном времени

Варианты настройки

Тонны вариантов настройки (Цвета, Поля, Тексты, Легенда, Шрифты, Градиенты . )

Шаблоны диаграмм

Создавайте красивые визуализации данных с помощью более 50 шаблонов диаграмм

Platinum Sponsor Membership

Join us as a sponsor and get Livegap Charts Pro without ads for all your employees,students .

*** you can try it for free for 7 days.

Pro Version

Get Charts Pro accounts without ads for all your employees,students

More Templates & Fonts Soon

Unlock more than 25 Templates and 200 Fonts

Save

Save Charts as animated HTML , Save to your PC

LiveGap Charts is a free website where teachers can create and share all kinds of charts: line, bar, area, pie, radar, icon matrix, and more. Start with a template and then edit the data in the spreadsheet (or copy it from your own spreadsheet). From there, there are tons of customization options. When finished, save the chart as an image or HTML, or create an account to save and share it online.

Common Sense Education www.commonsense.org

Thank you to Omar Sedki, for the nudge towards https://livegap.com/charts/ to make simple, but superb, online graphs, with a live preview as you change data. Create a line chart, bar chart, or radar chart, and then edit it in real time.

Tim Rylands www.timrylands.com

When you or your students just need to quickly generate a chart to use in a slide or share in a blog post. LiveGap Charts Builder will let you and your students quickly generate charts from simple data sets.