Google Charts — это библиотека диаграмм на основе чистого JavaScript, предназначенная для улучшения веб-приложений за счет добавления интерактивных возможностей построения диаграмм. Он поддерживает широкий спектр графиков. Графики создаются с использованием SVG в стандартных браузерах, таких как Chrome, Firefox, Safari, Internet Explorer (IE). В устаревшем IE 6 VML используется для рисования графики.
Модуль Google Chart Java — это библиотека на основе Java с открытым исходным кодом, которая предоставляет элегантную и многофункциональную визуализацию Google Charts в приложении GWT и может использоваться вместе с библиотеками виджетов GWT. Есть главы, обсуждающие все основные компоненты Google Charts с подходящими примерами в приложении GWT.
Характеристики
Ниже приведены основные функции библиотеки Google Charts.
Совместимость — работает без проблем на всех основных браузерах и мобильных платформах, таких как Android и iOS.
Поддержка мультитача — поддерживает мультитач на платформах с сенсорным экраном, таких как Android и iOS. Идеально подходит для iPhone / iPad и смартфонов / планшетов на базе Android.
Бесплатное использование — с открытым исходным кодом и бесплатное использование в некоммерческих целях.
Легковесная библиотека ядра loader.js, чрезвычайно легкая библиотека.
Простые конфигурации — использует json для определения различных конфигураций диаграмм и очень прост в освоении и использовании.
Динамический — позволяет изменять график даже после генерации графика.
Несколько осей — Не ограничено осями x, y. Поддерживает несколько осей на графиках.
Настраиваемые всплывающие подсказки — всплывающая подсказка появляется, когда пользователь наводит курсор на любую точку графика. googlecharts предоставляет встроенный форматер всплывающей подсказки или форматера обратного вызова для программного управления подсказкой.
Поддержка DateTime — специально обрабатывать дату и время. Обеспечивает многочисленные встроенные средства управления над категориями с указанием даты.
Печать — печать диаграммы с использованием веб-страницы.
Внешние данные — поддерживает динамическую загрузку данных с сервера. Обеспечивает контроль над данными с помощью функций обратного вызова.
Поворот текста — поддерживает вращение надписей в любом направлении.
Совместимость — работает без проблем на всех основных браузерах и мобильных платформах, таких как Android и iOS.
Поддержка мультитача — поддерживает мультитач на платформах с сенсорным экраном, таких как Android и iOS. Идеально подходит для iPhone / iPad и смартфонов / планшетов на базе Android.
Бесплатное использование — с открытым исходным кодом и бесплатное использование в некоммерческих целях.
Легковесная библиотека ядра loader.js, чрезвычайно легкая библиотека.
Простые конфигурации — использует json для определения различных конфигураций диаграмм и очень прост в освоении и использовании.
Динамический — позволяет изменять график даже после генерации графика.
Несколько осей — Не ограничено осями x, y. Поддерживает несколько осей на графиках.
Настраиваемые всплывающие подсказки — всплывающая подсказка появляется, когда пользователь наводит курсор на любую точку графика. googlecharts предоставляет встроенный форматер всплывающей подсказки или форматера обратного вызова для программного управления подсказкой.
Поддержка DateTime — специально обрабатывать дату и время. Обеспечивает многочисленные встроенные средства управления над категориями с указанием даты.
Печать — печать диаграммы с использованием веб-страницы.
Внешние данные — поддерживает динамическую загрузку данных с сервера. Обеспечивает контроль над данными с помощью функций обратного вызова.
Поворот текста — поддерживает вращение надписей в любом направлении.
Поддерживаемые типы диаграмм
Библиотека Google Charts предоставляет следующие типы диаграмм —
Старший
Тип диаграммы / Описание
1
Используется для построения графиков на основе линий / сплайнов.
Используется для рисования динамических диаграмм, где пользователь может изменять диаграммы.
Используется для рисования комбинаций различных графиков.
Используется для рисования трехмерных диаграмм.
Используется для построения диаграмм типа спидометра.
Используется для рисования тепловых карт.
Используется для рисования древовидных карт.
В следующих главах мы подробно обсудим каждый тип вышеупомянутых диаграмм с примерами.
Лицензия
GWT Google Charts — Настройка среды
Из этого туториала вы узнаете, как подготовить среду разработки, чтобы начать работу с Google Charts и GWT Framework. Это руководство также научит вас настраивать JDK, Tomcat и Eclipse на вашем компьютере перед установкой GWT Framework —
Системные требования
GWT требует JDK 1.6 или выше, поэтому самое первое требование — установить JDK на вашу машину.
JDK
1.6 или выше.
объем памяти
нет минимальных требований.
Дисковое пространство
нет минимальных требований.
Операционная система
нет минимальных требований.
Выполните указанные шаги, чтобы настроить среду для начала разработки приложений GWT.
Шаг 1. Проверка установки Java на вашем компьютере.
Теперь откройте консоль и выполните следующую команду Java.
Операционные системы
задача
команда
Windows
Открытая командная консоль
c: \> Java-версия
Linux
Открытый командный терминал
$ java-версия
макинтош
Открытый терминал
машина:
Давайте проверим вывод для всех операционных систем
Sr.No.
ОС и сгенерированный вывод
1
Java (TM) SE Runtime Environment (сборка 1.6.0_21-b07)
Установите переменную среды JAVA_HOME, чтобы она указывала на местоположение базовой директории, где установлена Java на вашем компьютере. Например
Sr.No.
ОС и выход
1
Задайте для переменной среды JAVA_HOME значение C: \ Program Files \ Java \ jdk1.6.0_21.
экспорт JAVA_HOME = / usr / local / java-current
export JAVA_HOME = / Библиотека / Java / Главная
Задайте для переменной среды JAVA_HOME значение C: \ Program Files \ Java \ jdk1.6.0_21.
экспорт JAVA_HOME = / usr / local / java-current
export JAVA_HOME = / Библиотека / Java / Главная
Добавьте расположение компилятора Java в системный путь.
Sr.No.
ОС и выход
1
Добавьте строку;% JAVA_HOME% \ bin в конец системной переменной Path.
Добавьте строку;% JAVA_HOME% \ bin в конец системной переменной Path.
В качестве альтернативы, если вы используете интегрированную среду разработки (IDE), такую как Borland JBuilder, Eclipse, IntelliJ IDEA или Sun ONE Studio, скомпилируйте и запустите простую программу, чтобы подтвердить, что IDE знает, где вы установили Java, в противном случае выполните правильную настройку в соответствии с данным документом. из IDE.
Шаг 3 — Настройка Eclipse IDE
Все примеры в этом руководстве написаны с использованием Eclipse IDE. Поэтому я хотел бы предложить, чтобы на вашем компьютере была установлена последняя версия Eclipse в зависимости от вашей операционной системы.
Google Charts — это библиотека диаграмм на основе чистого JavaScript, предназначенная для улучшения веб-приложений за счет добавления интерактивных возможностей построения диаграмм. Он поддерживает широкий спектр графиков. Графики создаются с использованием SVG в стандартных браузерах, таких как Chrome, Firefox, Safari, Internet Explorer (IE). В устаревшем IE 6 VML используется для рисования графики.
Характеристики
Ниже приведены основные функции библиотеки Google Charts.
Совместимость — работает без проблем на всех основных браузерах и мобильных платформах, таких как Android и iOS.
Поддержка мультитача — поддерживает мультитач на платформах с сенсорным экраном, таких как Android и iOS. Идеально подходит для iPhone / iPad и смартфонов / планшетов на базе Android.
Бесплатное использование — с открытым исходным кодом и бесплатное использование в некоммерческих целях.
Легковесная библиотека ядра loader.js, чрезвычайно легкая библиотека.
Простые конфигурации — использует json для определения различных конфигураций диаграмм и очень прост в освоении и использовании.
Динамический — позволяет изменять график даже после генерации графика.
Несколько осей — Не ограничено осями x, y. Поддерживает несколько осей на графиках.
Настраиваемые всплывающие подсказки — всплывающая подсказка появляется, когда пользователь наводит курсор на любую точку графика. googlecharts предоставляет встроенный форматер всплывающей подсказки или форматера обратного вызова для программного управления подсказкой.
Поддержка DateTime — специально обрабатывать дату и время. Обеспечивает многочисленные встроенные средства управления над категориями с указанием даты.
Печать — печать диаграммы с использованием веб-страницы.
Внешние данные — поддерживает динамическую загрузку данных с сервера. Обеспечивает контроль над данными с помощью функций обратного вызова.
Поворот текста — поддерживает вращение надписей в любом направлении.
Совместимость — работает без проблем на всех основных браузерах и мобильных платформах, таких как Android и iOS.
Поддержка мультитача — поддерживает мультитач на платформах с сенсорным экраном, таких как Android и iOS. Идеально подходит для iPhone / iPad и смартфонов / планшетов на базе Android.
Бесплатное использование — с открытым исходным кодом и бесплатное использование в некоммерческих целях.
Легковесная библиотека ядра loader.js, чрезвычайно легкая библиотека.
Простые конфигурации — использует json для определения различных конфигураций диаграмм и очень прост в освоении и использовании.
Динамический — позволяет изменять график даже после генерации графика.
Несколько осей — Не ограничено осями x, y. Поддерживает несколько осей на графиках.
Настраиваемые всплывающие подсказки — всплывающая подсказка появляется, когда пользователь наводит курсор на любую точку графика. googlecharts предоставляет встроенный форматер всплывающей подсказки или форматера обратного вызова для программного управления подсказкой.
Поддержка DateTime — специально обрабатывать дату и время. Обеспечивает многочисленные встроенные средства управления над категориями с указанием даты.
Печать — печать диаграммы с использованием веб-страницы.
Внешние данные — поддерживает динамическую загрузку данных с сервера. Обеспечивает контроль над данными с помощью функций обратного вызова.
Поворот текста — поддерживает вращение надписей в любом направлении.
Поддерживаемые типы диаграмм
Библиотека Google Charts предоставляет следующие типы диаграмм —
Sr.No.
Тип диаграммы и описание
1
Используется для построения графиков на основе линий / сплайнов.
Используется для рисования динамических диаграмм, где пользователь может изменять диаграммы.
Используется для рисования комбинаций различных графиков.
Используется для рисования трехмерных диаграмм.
Используется для построения диаграмм типа спидометра.
Используется для рисования тепловых карт.
Используется для рисования древовидных карт.
В следующих главах мы подробно обсудим каждый тип вышеупомянутых диаграмм с примерами.
Лицензия
Google Charts — Настройка среды
В этой главе мы обсудим, как настроить библиотеку Google Charts для использования в разработке веб-приложений.
Установите Google Charts
Существует два способа использования Google Charts.
Загрузить — загрузите его локально с https://developers.google.com/chart и используйте его.
Загрузить — загрузите его локально с https://developers.google.com/chart и используйте его.
Использование загруженной Google Chart
Включите JavaScript-файл googlecharts на HTML-страницу, используя следующий скрипт —
Использование CDN
В этом руководстве мы используем CDN-версии библиотеки Google Chart.
Включите файл JavaScript Google Chart в HTML-страницу, используя следующий скрипт —
Google Charts — Синтаксис конфигурации
В этой главе мы продемонстрируем конфигурацию, необходимую для построения диаграммы с помощью Google Chart API.
Шаг 1: Создать страницу HTML
Создайте страницу HTML с библиотеками Google Chart.
Здесь контейнер div используется для хранения диаграммы, построенной с использованием библиотеки Google Chart. Здесь мы загружаем последнюю версию API-интерфейса corecharts, используя метод google.charts.load.
Шаг 2. Создание конфигураций
Библиотека Google Chart использует очень простые конфигурации с использованием синтаксиса json.
Здесь данные представляют данные json, а параметры представляют конфигурацию, которую библиотека Google Chart использует для рисования диаграммы с использованием контейнера div с использованием метода draw (). Теперь мы настроим различные параметры для создания требуемой строки json.
заглавие
Настройте параметры диаграммы.
Таблица данных
Настройте данные для отображения на графике. DataTable — это специальная таблица со структурированной коллекцией, которая содержит данные диаграммы. Столбцы таблицы данных представляют легенды, а строки представляют соответствующие данные. Метод addColumn () используется для добавления столбца, где первый параметр представляет тип данных, а второй параметр представляет легенду. Метод addRows () используется для добавления строк соответственно.
Шаг 3: Нарисуйте график
пример
Ниже приведен полный пример —
Следующий код вызывает функцию drawChart для рисования графика, когда библиотека Google Chart полностью загружена.
Результат
Google Charts — Area Charts
Диаграммы площадей используются для построения диаграмм площадок. В этом разделе мы собираемся обсудить следующие типы диаграмм на основе областей.
Google Chart Tools API – это многофункциональный набор инструментов для визуализации данных. С помощью него можно относительно легко строить графики и диаграммы на сайте.
Функционал Google Chart Tools API включает в себя:
Карта
Сделаем визуализацию данных с помощью карты, раскрашенной в соответствии с внесенными данными. Для начала подключаем файлы, loader.js обязателен.
Выбираем тип визуализации и вставляем его в следующий код, в нашем случае geochart.
Создаем функцию drawChart(). Указываем параметры визуализации, в нашем случае карты. В массив нужно поместить своеобразную «таблицу» данных: в одной ячейке определена страна, в другой — данные, которые проявятся при hover эффекте, число соответствует яркости государства на карте.
Указываем контейнер, в который будем помещать карту.
По такому шаболну строятся все эффекты визуализации GCT API.
Диаграмма
Теперь создадим простую диаграмму.
Чтобы сделать диаграмму 3D, добавляем параметр is3D:true.
Можно «вырезать» центр.
Или «вытащить» кусочки диаграммы на расстояние.
Ступенчатая диаграмма создается аналогичным образом, но в настройки нужно добавить isStacked: true.
Дерево
Теперь создадим «дерево», где слова визуально соединяются между собой.
Подключаем элемент wordtree.
В настройках выводим слово, от которого будет строиться дерево. Строка format имеет большое значение: если указать implicit, то дерево будет строиться автоматически от указанного слова. Значение explicit позволяет строить дерево в ручном режиме.
От слова «коты» будет строиться дерево, одинаковые слова будут объединяться в одно.
Датчик
И, в завершение, хочется показать работу датчиков – спидометров.
В массиве указываем название датчика и позицию стрелки.
Размер блока с датчиками, разрисовка полей датчика красным и желтым цветом. Позиция minorTicks:5 уменьшает цену деления датчика.
Google Chart Tools API – это многофункциональный набор инструментов для визуализации данных. С помощью него можно относительно легко строить графики и диаграммы на сайте.
Функционал Google Chart Tools API включает в себя:
Карта
Сделаем визуализацию данных с помощью карты, раскрашенной в соответствии с внесенными данными. Для начала подключаем файлы, loader.js обязателен.
Выбираем тип визуализации и вставляем его в следующий код, в нашем случае geochart.
Создаем функцию drawChart(). Указываем параметры визуализации, в нашем случае карты. В массив нужно поместить своеобразную «таблицу» данных: в одной ячейке определена страна, в другой — данные, которые проявятся при hover эффекте, число соответствует яркости государства на карте.
Указываем контейнер, в который будем помещать карту.
По такому шаболну строятся все эффекты визуализации GCT API.
Диаграмма
Теперь создадим простую диаграмму.
Чтобы сделать диаграмму 3D, добавляем параметр is3D:true.
Можно «вырезать» центр.
Или «вытащить» кусочки диаграммы на расстояние.
Ступенчатая диаграмма создается аналогичным образом, но в настройки нужно добавить isStacked: true.
Дерево
Теперь создадим «дерево», где слова визуально соединяются между собой.
Подключаем элемент wordtree.
В настройках выводим слово, от которого будет строиться дерево. Строка format имеет большое значение: если указать implicit, то дерево будет строиться автоматически от указанного слова. Значение explicit позволяет строить дерево в ручном режиме.
От слова «коты» будет строиться дерево, одинаковые слова будут объединяться в одно.
Датчик
И, в завершение, хочется показать работу датчиков – спидометров.
В массиве указываем название датчика и позицию стрелки.
Размер блока с датчиками, разрисовка полей датчика красным и желтым цветом. Позиция minorTicks:5 уменьшает цену деления датчика.
Использование Google Charts в посте WordPress
Каждому аналитику, менеджеру и генеральному директору нравятся потрясающие графики. На хороший график приятно смотреть, его легко понять, и его создание не должно быть ракетостроением.
Существуют сотни отличных инструментов и фреймворков, которые позволяют создавать красивые графики. Испытав десятки из них, я, наконец, выбрал Google Charts в качестве инструмента.
Начинающим
Для самых простых пользователей, я предлагаю изучить некоторые из плагинов WP. Просто в Google «Плагины диаграмм в WordPress». Они сделают эту работу, но Google Charts имеет гораздо больше возможностей для немного больших усилий и задач.
Вот почему
Существуют инструменты для создания диаграмм, которые превосходят Google Charts по некоторым конкретным критериям, но объединяя их все, GC – явный победитель.
Использование Google Charts в посте WordPress
Google Charts гибки, вы можете разместить их повсюду (в Интернете), и одним из мест, где вы хотели бы их использовать, может быть ваш блог. И если ваш блог работает на WordPress, вот что вам нужно знать.
Практически то же самое относится ко всем сайтам.
Шаг 1 – Загрузите скрипт
Есть несколько способов загрузки скриптов в WordPress, я расскажу о двух наиболее распространенных.
Вариант 1. Поместите это прямо в тег в ваших файлах темы WordPress. Обычно header.php
Вариант 2. Загрузить скрипт используя wp_enqueue_script
Шаг 2 – Посмотрите на галерею диаграмм
У них есть отличная галерея, показывающая, что можно сделать с помощью Google Charts, включая исходный код и даже ссылку на JS Fiddle, чтобы вы могли поиграть самостоятельно.
Вот и все, выберите понравившуюся диаграмму и поместите код в пост WordPress (текстовый режим).
Примеры Google Charts в посте WordPress
Образец 1 – Линейная Диаграмма
Образец 2 – круговая диаграмма
задача
Часов в день
Работа
11
Есть
2
Ездить
2
Смотри телевизор
2
Спать
7
Образец 3 – комбинированная диаграмма
Monthly Coffee Production by CountryBoliviaEcuadorMadagascarPapua NewGuineaRwandaAverage2005/062006/072007/082008/0902004006008001,0001,2001,400MonthCups
Месяц
Боливия
Эквадор
Мадагаскар
Папуа – Новая Гвинея
Руанда
Средний
2005/06
135
+1120
599
1268
288
682
2006/07
157
1167
587
807
397
623
2007/08
139
+1110
615
+968
215
609,4
2008/09
136
+691
629
1026
366
569,6
Почему бы просто не использовать изображения диаграмм?
Конечно, вы также можете использовать некоторые инструменты, которые позволят вам создавать диаграммы в виде файлов изображений, которые вы можете позже загрузить в WordPress. Позвольте мне сказать вам, почему вы должны не делать этого.
Просто попробуйте, и вы увидите разницу!
Разве размещение кода в посте не плохая идея?
Если вы интенсивный пользователь этих графиков, я бы порекомендовал создать плагин или хотя бы шорткод для них. Но если вы время от времени используете только несколько диаграмм в своих сообщениях, нет ничего плохого в том, чтобы вставлять их в виде простого кода прямо в ваше сообщение.
Если у вас есть какие-либо вопросы о настройке, просто задайте их в комментариях ниже, и мы ответим на них!
Вывод
Если вы ищете простую в использовании библиотеку диаграмм, на которую также приятно смотреть и которая имеет массу настроек, я бы порекомендовал попробовать Google Charts. Помимо всего прочего, у него также есть супер хорошая библиотека и хорошее сообщество, использующее ее.
В случае, если вы ищете действительно масштабируемое решение для построения графиков с практически неограниченными возможностями настройки, смотрите в D3.js.
Пожалуйста, дайте знать в комментариях, какую библиотеку диаграмм вы используете и каковы ее преимущества.
Описание системы Google Charts
Google Charts – это облачный веб-сервис, позволяющий визуализировать данные и помогающий представлять статистику в виде круговых диаграмм, графиков, пиктограмм и т.п..
Шаблоны диаграмм в веб-инструменте для визуализации данных и бизнес-аналтики Google Charts
Пример диаграммы на базе аналитического BI-инструмента Google Charts
Программирование скрипта для формирования диаграммы на базе аналитической платформы Гугл Чартс
