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.exe

Eclipse можно запустить, выполнив следующие команды на машине 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();
   }
}

Результат

Проверьте результат.