GWT Google Charts - Краткое руководство
Google Charts- это библиотека диаграмм на основе чистого JavaScript, предназначенная для улучшения веб-приложений за счет добавления интерактивных возможностей построения диаграмм. Он поддерживает широкий спектр диаграмм. Диаграммы рисуются с использованием SVG в стандартных браузерах, таких как Chrome, Firefox, Safari, Internet Explorer (IE). В устаревшем IE 6 для рисования графики используется VML.
Google Chart Java Module- это библиотека на основе Java с открытым исходным кодом, которая обеспечивает элегантную и многофункциональную визуализацию Google Charts в приложении GWT и может использоваться вместе с библиотеками виджетов GWT. Есть главы, в которых обсуждаются все основные компоненты Google Charts с подходящими примерами в приложении GWT.
Особенности
Ниже приведены основные функции библиотеки Google Charts.
Compatability - Работает безупречно во всех основных браузерах и мобильных платформах, таких как Android и iOS.
Multitouch Support- Поддерживает мультитач на платформах с сенсорным экраном, таких как Android и iOS. Идеально подходит для смартфонов / планшетов на базе iPhone / iPad и Android.
Free to Use - Открытый исходный код и бесплатное использование в некоммерческих целях.
Lightweight - основная библиотека loader.js, очень легкая библиотека.
Simple Configurations - Использует json для определения различных конфигураций диаграмм и очень прост в изучении и использовании.
Dynamic - Позволяет изменять график даже после его создания.
Multiple axes- Не ограничивается осями x, y. Поддерживает несколько осей на диаграммах.
Configurable tooltips- Всплывающая подсказка появляется, когда пользователь наводит курсор на любую точку графика. googlecharts предоставляет встроенное средство форматирования всплывающих подсказок или средство форматирования обратного вызова для программного управления всплывающей подсказкой.
DateTime support- Специально обрабатывайте дату и время. Предоставляет многочисленные встроенные средства управления категориями по дате.
Print - Распечатать диаграмму с помощью веб-страницы.
External data- Поддерживает динамическую загрузку данных с сервера. Обеспечивает контроль над данными с помощью функций обратного вызова.
Text Rotation - Поддерживает вращение этикеток в любом направлении.
Поддерживаемые типы диаграмм
Библиотека Google Charts предоставляет следующие типы диаграмм -
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Line Charts Используется для рисования диаграмм на основе линий / сплайнов. |
| 2 | Area Charts Используется для рисования диаграмм по площади. |
| 3 | Pie Charts Используется для рисования круговых диаграмм. |
| 4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Используется для рисования разрозненных диаграмм. |
| 5 | Bubble Charts Используется для рисования пузырьковых диаграмм. |
| 6 | Dynamic Charts Используется для рисования динамических диаграмм, где пользователь может изменять диаграммы. |
| 7 | Combinations Используется для рисования комбинаций различных диаграмм. |
| 8 | 3D Charts Используется для рисования трехмерных диаграмм. |
| 9 | Angular Gauges Используется для рисования диаграмм типа спидометра. |
| 10 | Heat Maps Используется для рисования тепловых карт. |
| 11 | Tree Maps Используется для рисования древовидных карт. |
В следующих главах мы собираемся подробно обсудить каждый тип вышеупомянутых диаграмм с примерами.
Лицензия
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 -версия |
| Mac | Открыть Терминал | машина: ~ joseph $ java -version |
Проверим вывод для всех операционных систем
| Sr. No. | ОС и сгенерированный вывод |
|---|---|
| 1 | Windows версия java "1.6.0_21" Среда выполнения Java (TM) SE (сборка 1.6.0_21-b07) Клиентская виртуальная машина Java HotSpot (TM) (сборка 17.0-b17, смешанный режим, совместное использование) |
| 2 | Linux версия java "1.6.0_21" Среда выполнения Java (TM) SE (сборка 1.6.0_21-b07) Клиентская виртуальная машина ava HotSpot (TM) (сборка 17.0-b17, смешанный режим, совместное использование) |
| 3 | Mac версия java "1.6.0_21" Среда выполнения Java (TM) SE (сборка 1.6.0_21-b07) 64-разрядная серверная виртуальная машина Java HotSpot (TM) (сборка 17.0-b17, смешанный режим, совместное использование) |
Шаг 2 - Установите Java Development Kit (JDK)
Если у вас не установлена Java, вы можете установить Java Software Development Kit (SDK) с сайта Oracle Java: Java SE Downloads . Вы найдете инструкции по установке JDK в загруженных файлах, следуйте данным инструкциям, чтобы установить и настроить установку. Наконец, установите переменные среды PATH и JAVA_HOME для ссылки на каталог, содержащий java и javac, обычно java_install_dir / bin и java_install_dir соответственно.
Установить JAVA_HOMEпеременная среды, указывающая на расположение базового каталога, в котором установлена Java на вашем компьютере. Например
| Sr. No. | ОС и вывод |
|---|---|
| 1 | Windows Установите для переменной среды JAVA_HOME значение C: \ Program Files \ Java \ jdk1.6.0_21 |
| 2 | Linux экспорт JAVA_HOME = / usr / local / java-current |
| 3 | Mac экспорт JAVA_HOME = / Библиотека / Java / Home |
Добавьте расположение компилятора Java в системный путь.
| Sr. No. | ОС и вывод |
|---|---|
| 1 | Windows Добавьте строку;% JAVA_HOME% \ bin в конец системной переменной Path. |
| 2 | Linux экспорт PATH = $ PATH: $ JAVA_HOME / bin / |
| 3 | Mac не требуется |
В качестве альтернативы, если вы используете интегрированную среду разработки (IDE), такую как Borland JBuilder, Eclipse, IntelliJ IDEA или Sun ONE Studio, скомпилируйте и запустите простую программу, чтобы убедиться, что IDE знает, где вы установили Java, в противном случае выполните правильную настройку в соответствии с данным документом. среды IDE.
Шаг 3 - Установите Eclipse IDE
Все примеры в этом руководстве были написаны с использованием Eclipse IDE. Поэтому я бы посоветовал вам установить на вашем компьютере последнюю версию Eclipse в зависимости от вашей операционной системы.
Чтобы установить Eclipse IDE, загрузите последние двоичные файлы Eclipse из https://www.eclipse.org/downloads/. После того, как вы скачали установку, распакуйте двоичный дистрибутив в удобное место. Например, в C: \ eclipse в Windows или в / usr / local / eclipse в Linux / Unix и, наконец, установите переменную PATH соответствующим образом.
Eclipse можно запустить, выполнив следующие команды на компьютере с Windows, или вы можете просто дважды щелкнуть по eclipse.exe
%C:\eclipse\eclipse.exeEclipse можно запустить, выполнив следующие команды на машине Unix (Solaris, Linux и т. Д.):
$/usr/local/eclipse/eclipseПосле успешного запуска, если все в порядке, он должен отобразить результат
Шаг 4. Установите GWT SDK и плагин для Eclipse
Следуйте инструкциям по ссылке Плагин для Eclipse (включая SDK), чтобы установить GWT SDK и плагин для версии Eclipse, установленные на вашем компьютере.
Если после успешной установки плагина GWT все в порядке, он должен отобразить следующий экран с Google icon отмечен красным прямоугольником.
Шаг 5. Установите Google Charts
Загрузите последнюю версию jar- файла Google Charts со страницы репозитория MVN и добавьте его в путь к классам проекта.
Добавьте следующую запись в файл <project-name> .gwt.xml
<inherits name = "com.googlecode.gwt.charts.Charts"/>В этой главе мы продемонстрируем конфигурацию, необходимую для рисования диаграммы с помощью Google Charts API в GWT.
Шаг 1. Создайте приложение GWT
Выполните следующие шаги, чтобы обновить приложение GWT, которое мы создали в GWT - Глава Создание приложения -
| Шаг | Описание |
|---|---|
| 1 | Создайте проект с именем HelloWorld в пакете com.tutorialspoint, как описано в главе GWT - Создание приложения . |
| 2 | Измените HelloWorld.gwt.xml , HelloWorld.html и HelloWorld.java, как описано ниже. Остальные файлы оставьте без изменений. |
| 3 | Скомпилируйте и запустите приложение, чтобы проверить результат реализованной логики. |
Ниже приводится содержание измененного дескриптора модуля. src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<inherits name = 'com.google.gwt.user.User'/>
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<inherits name="com.googlecode.gwt.charts.Charts"/>
<source path = 'client'/>
<source path = 'shared'/>
</module>Ниже приводится содержимое измененного файла хоста HTML. war/HelloWorld.html.
<html>
<head>
<title>GWT Highcharts Showcase</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</head>
<body>
</body>
</html>Мы увидим обновленный HelloWorld.java в конце после понимания настроек.
Шаг 2. Создайте конфигурации
Загрузите библиотеку и создайте диаграмму
Загрузите библиотеку с помощью ChartLoader, а затем создайте диаграмму.
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
PieChart chart = new PieChart();
}
});Таблица данных
Настройте детали, создав таблицу данных.
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Browser");
data.addColumn(ColumnType.NUMBER, "Percentage");
data.addRow("Firefox", 45.0);
data.addRow("IE", 26.8);
data.addRow("Chrome", 12.8);
data.addRow("Safari", 8.5);
data.addRow("Opera", 6.2);
data.addRow("Others", 0.7);
// Draw the chart
chart.draw(data);Размер
Настройте ширину и высоту, которые нужно установить.
chart.setWidth("700px");
chart.setHeight("700px");Шаг 3: Добавьте диаграмму на родительскую панель.
Мы добавляем диаграмму в корневую панель.
RootPanel.get().add(chart);пример
Рассмотрим следующий пример, чтобы лучше понять синтаксис конфигурации -
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.PieChart;
public class HelloWorld implements EntryPoint {
private PieChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new PieChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Browser");
data.addColumn(ColumnType.NUMBER, "Percentage");
data.addRow("Firefox", 45.0);
data.addRow("IE", 26.8);
data.addRow("Chrome", 12.8);
data.addRow("Safari", 8.5);
data.addRow("Opera", 6.2);
data.addRow("Others", 0.7);
// Draw the chart
chart.draw(data);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Результат
Проверьте результат.
Диаграммы с областями используются для построения диаграмм с областями. В этом разделе мы собираемся обсудить следующие типы диаграмм на основе областей.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Основная область Базовая диаграмма с областями |
| 2 | Область с отрицательными значениями Диаграмма с областями с отрицательными значениями. |
| 3 | Сложенная область Диаграмма с областями, наложенными одна на другую. |
| 4 | Область с недостающими точками График с пропущенными точками в данных. |
Гистограммы используются для построения гистограмм. В этом разделе мы собираемся обсудить следующие типы столбчатых диаграмм.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовый бар Базовая гистограмма |
| 2 | Сгруппированная столбчатая диаграмма Сгруппированная гистограмма. |
| 3 | Сложенный бар Столбиковая диаграмма с наложенными друг на друга столбцами. |
| 4 | Отрицательная полоса Гистограмма с отрицательным стеком. |
| 5 | Диаграмма различий Гистограмма, показывающая различия. |
Пузырьковые диаграммы используются для построения пузырьковых диаграмм. В этом разделе мы собираемся обсудить следующие типы пузырьковых диаграмм.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовый пузырь Базовая пузырьковая диаграмма. |
| 2 | Пузырьковая диаграмма с метками данных Пузырьковая диаграмма с метками данных. |
Графики свечей используются для отображения стоимости открытия и закрытия в зависимости от отклонения стоимости и обычно используются для представления акций. В этом разделе мы собираемся обсудить следующие типы графиков на основе свечей.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовый подсвечник Базовый свечной график. |
| 2 | Подсвечник с индивидуальными цветами Настроенный график свечей. |
Столбчатые диаграммы используются для построения диаграмм на основе столбцов. В этом разделе мы собираемся обсудить следующие типы диаграмм на основе столбцов.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовая колонка Базовая столбчатая диаграмма |
| 2 | Сгруппированная столбчатая диаграмма Групповая диаграмма Colummn. |
| 3 | Столбец с накоплением Столбчатая диаграмма с наложенными друг на друга столбцами. |
| 4 | Отрицательный столбец с накоплением Столбчатая диаграмма с отрицательным стеком. |
| 5 | Столбчатая диаграмма различий Столбчатая диаграмма, показывающая различия. |
Комбинированная диаграмма помогает отображать каждую серию как отдельный тип маркера из следующего списка: линия, область, столбцы, свечи и ступенчатая область. Чтобы назначить тип маркера по умолчанию для серии, используйте свойство seriesType. Свойство серии следует использовать для определения свойств каждой серии в отдельности. Ниже приведен пример столбчатой диаграммы, показывающей различия.
Мы уже видели конфигурации, используемые для рисования диаграммы в главе Синтаксис конфигурации Google Charts . Теперь давайте посмотрим на пример столбчатой диаграммы, показывающей различия.
Конфигурации
Мы использовали ComboChart класс, чтобы показать комбинированную диаграмму.
// Combination chart
ComboChart chart = new ComboChart();пример
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ComboChart;
import com.googlecode.gwt.charts.client.corechart.ComboChartOptions;
import com.googlecode.gwt.charts.client.corechart.ComboChartSeries;
import com.googlecode.gwt.charts.client.options.HAxis;
import com.googlecode.gwt.charts.client.options.SeriesType;
import com.googlecode.gwt.charts.client.options.VAxis;
public class HelloWorld implements EntryPoint {
private ComboChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new ComboChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Fruits");
data.addColumn(ColumnType.NUMBER, "Jane");
data.addColumn(ColumnType.NUMBER, "Jone");
data.addColumn(ColumnType.NUMBER, "Average");
data.addRow("Apples", 3, 2, 2.5);
data.addRow("Oranges",2, 3, 2.5);
data.addRow("Pears", 1, 5, 3);
data.addRow("Bananas", 3, 9, 6);
data.addRow("Plums", 4, 2, 3);
// Set options
ComboChartOptions options = ComboChartOptions.create();
options.setTitle("Fruits distribution");
options.setHAxis(HAxis.create("Person"));
options.setVAxis(VAxis.create("Fruits"));
options.setSeriesType(SeriesType.BARS);
ComboChartSeries lineSeries = ComboChartSeries.create();
lineSeries.setType(SeriesType.LINE);
options.setSeries(2,lineSeries);
// Draw the chart
chart.draw(data,options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Результат
Проверьте результат.
Гистограмма - это диаграмма, которая группирует числовые данные в сегменты, отображая сегменты в виде сегментированных столбцов. Они используются для описания распределения набора данных в виде того, как часто значения попадают в диапазоны. Google Charts автоматически выбирает количество сегментов за вас. Все сегменты имеют одинаковую ширину и высоту, пропорциональную количеству точек данных в сегменте. Гистограммы похожи на столбчатые диаграммы в других аспектах. В этом разделе мы собираемся обсудить следующие типы диаграмм на основе гистограмм.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовая гистограмма Базовая гистограмма. |
| 2 | Контроль цвета Настраиваемый цвет диаграммы гистрограммы. |
| 3 | Управление бакетами Настраиваемые сегменты диаграммы гистрограммы. |
| 4 | Несколько серий Диаграмма гистограммы, имеющая несколько серий. |
Линейные диаграммы используются для построения линейных диаграмм. В этом разделе мы собираемся обсудить следующие типы линейных диаграмм.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовая линия Базовый линейный график. |
| 2 | С видимыми точками Диаграмма с видимыми точками данных. |
| 3 | Настраиваемый цвет фона Диаграмма с настраиваемым цветом фона. |
| 4 | Настраиваемый цвет линии График с настраиваемым цветом линии. |
| 5 | Настраиваемые метки осей и делений Диаграмма с настраиваемыми осями и метками. |
| 6 | Перекрестие Линейные диаграммы, показывающие перекрестие в точке данных при выборе. |
| 7 | Настраиваемый стиль линии График с настраиваемым цветом линии. |
| 8 | Графики с изогнутыми линиями График с плавными кривыми линиями. |
Карта Google Map Chart использует Google Maps API для отображения карты. Значения данных отображаются на карте в виде маркеров. Значения данных могут быть координатами (пары долгота-широта) или фактическими адресами. Карта будет соответствующим образом масштабирована, чтобы включить все идентифицированные точки.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовая карта Базовая карта Google. |
| 2 | Карта с использованием широты / долготы Карта с местоположениями, указанными с помощью широты и долготы. |
Ниже приведен пример организационной схемы.
Организационная диаграмма помогает в отображении иерархии узлов, используемых для изображения отношений высшего / подчиненного в организации. Например, генеалогическое древо - это разновидность организационной схемы. Мы уже видели конфигурации, используемые для рисования диаграммы в главе Синтаксис конфигурации Google Charts . Теперь давайте посмотрим на пример организационной схемы.
Конфигурации
Мы использовали OrgChart класс, чтобы показать диаграмму организации.
// Organization chart
OrgChart chart = new OrgChart();пример
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.format.PatternFormat;
import com.googlecode.gwt.charts.client.orgchart.OrgChart;
import com.googlecode.gwt.charts.client.orgchart.OrgChartOptions;
public class HelloWorld implements EntryPoint {
private OrgChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.ORGCHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new OrgChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Name");
dataTable.addColumn(ColumnType.STRING, "Manager");
dataTable.addColumn(ColumnType.STRING, "ToolTip");
dataTable.addRows(5);
dataTable.setValue(0, 0, "Mike");
dataTable.setValue(0, 1, "");
dataTable.setValue(0, 2, "The President");
dataTable.setValue(1, 0, "Jim");
dataTable.setValue(1, 1, "Mike");
dataTable.setValue(1, 2, "VP");
dataTable.setValue(2, 0, "Alice");
dataTable.setValue(2, 1, "Mike");
dataTable.setValue(2, 2, "");
dataTable.setValue(3, 0, "Bob");
dataTable.setValue(3, 1, "Jim");
dataTable.setValue(3, 2, "Bob Sponge");
dataTable.setValue(4, 0, "Carol");
dataTable.setValue(4, 1, "Bob");
dataTable.setValue(4, 2, "");
PatternFormat format = PatternFormat.create("{0} {1}");
format.format(dataTable, 0, 2);
// Set options
OrgChartOptions options = OrgChartOptions.create();
options.setAllowHtml(true);
// Draw the chart
chart.draw(dataTable, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Результат
Проверьте результат.
Круговые диаграммы используются для построения круговых диаграмм. В этом разделе мы собираемся обсудить следующие типы круговых диаграмм.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Обычный пирог Базовая круговая диаграмма. |
| 2 | Пончиковая диаграмма Пончиковая диаграмма. |
| 3 | 3D круговая диаграмма 3D круговая диаграмма. |
| 4 | Круговая диаграмма с разнесенными фрагментами Круговая диаграмма с разнесенными фрагментами. |
Диаграмма Сэнки - это инструмент визуализации, который используется для изображения перехода от одного набора значений к другому. Связанные объекты называются узлами, а соединения - ссылками. Санки используются для отображения отображения «многие ко многим» между двумя доменами или несколькими путями через набор этапов.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовая диаграмма Санки Базовая диаграмма Санки. |
| 2 | Многоуровневая диаграмма Санки Многоуровневая диаграмма Санки. |
| 3 | Настройка диаграммы Санки Индивидуальная диаграмма Санки. |
Ниже приведен пример диаграммы рассеивания.
Мы уже видели конфигурации, используемые для рисования диаграммы в главе Синтаксис конфигурации Google Charts . Теперь давайте посмотрим на пример точечной диаграммы.
Конфигурации
Мы использовали ScatterChart класс, чтобы показать диаграмму разброса.
ScatterChart chart = new ScatterChart();пример
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ScatterChart;
import com.googlecode.gwt.charts.client.corechart.ScatterChartOptions;
public class HelloWorld implements EntryPoint {
private ScatterChart chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new ScatterChart();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.NUMBER, "Age");
data.addColumn(ColumnType.NUMBER, "Weight");
data.addRow(8,12);
data.addRow(4, 5.5);
data.addRow(11,14);
data.addRow(4,5);
data.addRow(3,3.5);
data.addRow(6.5,7);
ScatterChartOptions options = ScatterChartOptions.create();
options.setTitle("Age vs Weight");
options.setLegend(null);
// Draw the chart
chart.draw(data, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Результат
Проверьте результат.
Ступенчатая диаграмма с областями - это ступенчатая диаграмма с областями. Мы собираемся обсудить следующие типы ступенчатых диаграмм с областями.
| Sr. No. | Тип диаграммы / Описание |
|---|---|
| 1 | Базовая ступенчатая диаграмма Базовая ступенчатая диаграмма. |
| 2 | Составная ступенчатая диаграмма Диаграмма с накоплением ступенчатых областей. |
Табличная диаграмма помогает в отображении таблицы, которую можно сортировать и разбивать на страницы. Ячейки таблицы можно отформатировать с помощью строк формата или путем прямой вставки HTML в качестве значений ячеек. По умолчанию числовые значения выравниваются по правому краю; логические значения отображаются в виде галочки или крестика. Пользователи могут выбирать отдельные строки с помощью клавиатуры или мыши. Заголовки столбцов можно использовать для сортировки. Строка заголовка остается неизменной во время прокрутки. Таблица запускает события, соответствующие взаимодействию с пользователем.
Мы уже видели конфигурации, используемые для рисования диаграммы в главе Синтаксис конфигурации Google Charts . Теперь давайте посмотрим на пример табличной диаграммы.
Конфигурации
Мы использовали Table класс, чтобы показать диаграмму таблицы.
Table chart = new Chart();пример
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.table.Table;
import com.googlecode.gwt.charts.client.table.TableOptions;
public class HelloWorld implements EntryPoint {
private Table chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.TABLE);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new Table();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Name");
dataTable.addColumn(ColumnType.NUMBER, "Salary");
dataTable.addColumn(ColumnType.BOOLEAN, "Full Time Employee");
dataTable.addRows(4);
dataTable.setCell(0, 0, "Mike");
dataTable.setCell(0, 1, 10000, "$10,000");
dataTable.setCell(0, 2, true);
dataTable.setCell(1, 0, "Jim");
dataTable.setCell(1, 1, 8000, "$8,000");
dataTable.setCell(1, 2, false);
dataTable.setCell(2, 0, "Alice");
dataTable.setCell(2, 1, 12500, "$12,500");
dataTable.setCell(2, 2, true);
dataTable.setCell(3, 0, "Bob");
dataTable.setCell(3, 1, 7000, "$7,000");
dataTable.setCell(3, 2, true);
TableOptions options = TableOptions.create();
options.setAlternatingRowStyle(true);
options.setShowRowNumber(true);
// Draw the chart
chart.draw(dataTable, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Результат
Проверьте результат.
TreeMap - это визуальное представление дерева данных, в котором каждый узел может иметь ноль или более дочерних элементов и одного родителя (кроме корня). Каждый узел отображается в виде прямоугольника, его размер и цвет можно изменять в соответствии со значениями, которые мы присваиваем. Размеры и цвета оцениваются относительно всех других узлов в графе. Ниже приводится пример древовидной диаграммы.
Мы уже видели конфигурации, используемые для рисования диаграммы в главе Синтаксис конфигурации Google Charts . Теперь давайте посмотрим на пример диаграммы TreeMap.
Конфигурации
Мы использовали TreeMap для отображения диаграммы TreeMap.
TreeMap chart = new TreeMap();пример
HelloWorld.java
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.treemap.TreeMap;
import com.googlecode.gwt.charts.client.treemap.TreeMapOptions;
public class HelloWorld implements EntryPoint {
private TreeMap chart;
private void initialize() {
ChartLoader chartLoader = new ChartLoader(ChartPackage.TREEMAP);
chartLoader.loadApi(new Runnable() {
public void run() {
// Create and attach the chart
chart = new TreeMap();
RootPanel.get().add(chart);
draw();
}
});
}
private void draw() {
// Prepare the data
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Location");
dataTable.addColumn(ColumnType.STRING, "Parent");
dataTable.addColumn(ColumnType.NUMBER, "Market trade volume (size)");
dataTable.addColumn(ColumnType.NUMBER, "Market increase/decrease (color)");
dataTable.addRow("Global",null,0,0);
dataTable.addRow("America","Global",0,0);
dataTable.addRow("Europe","Global",0,0);
dataTable.addRow("Asia","Global",0,0);
dataTable.addRow("Australia","Global",0,0);
dataTable.addRow("Africa","Global",0,0);
dataTable.addRow("USA","America",52,31);
dataTable.addRow("Mexico","America",24,12);
dataTable.addRow("Canada","America",16,-23);
dataTable.addRow("France","Europe",42,-11);
dataTable.addRow("Germany","Europe",31,-2);
dataTable.addRow("Sweden","Europe",22,-13);
dataTable.addRow("China","Asia",36,4);
dataTable.addRow("Japan","Asia",20,-12);
dataTable.addRow("India","Asia",40,63);
dataTable.addRow("Egypt","Africa",21,0);
dataTable.addRow("Congo","Africa",10,12);
dataTable.addRow("Zaire","Africa",8,10);
// Set options
TreeMapOptions options = TreeMapOptions.create();
options.setMinColor("#ff7777");
options.setMidColor("#ffff77");
options.setMaxColor("#77ff77");
options.setHeaderHeight(15);
options.setShowScale(true);
// Draw the chart
chart.draw(dataTable, options);
chart.setWidth("400px");
chart.setHeight("400px");
}
public void onModuleLoad() {
initialize();
}
}Результат
Проверьте результат.
