GWT Highcharts - Краткое руководство

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

Особенности

  • Compatible- Все современные браузеры поддерживаются вместе с браузерами iPhone / iPad и Internet Explorer 6 и новее. Современные браузеры используют SVG для визуализации графики, а в устаревших версиях Internet Explorer графика рисуется с использованием VML.

  • Pure Java - JavaScript не требуется, так как полный API Highcharts доступен в методах Java.

  • No Flash - Не требуются подключаемые модули на стороне клиента, такие как Flash player или Java, поскольку Highcharts использует собственные браузерные технологии, а диаграммы можно запускать без изменений на современных мобильных устройствах.

  • Clean Syntax - Большинство методов объединяются в цепочки, поэтому параметрами конфигурации диаграммы можно управлять, используя такой же строгий синтаксис, как JSON.

  • Dynamic- Серии и точки могут быть добавлены динамически в любое время после создания диаграммы. Поддерживаются перехватчики событий. Поддерживаются взаимодействия с сервером.

  • Documented - API Highcharts тщательно документированы с многочисленными примерами кода и синтаксиса.

Это руководство расскажет вам, как подготовить среду разработки для начала работы с Highcharts и 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: установите Highcharts

Загрузите последнюю версию банка Highcharts со страницы загрузки и добавьте ее в путь к классам проекта.

Добавьте следующую запись в файл <project-name> .gwt.xml

<inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>

Добавьте следующую запись в файл <project-name> .html

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>
<script src = "https://code.highcharts.com/highcharts.js"/>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-3d.js" />
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js" />
<script src = "https://code.highcharts.com/modules/heatmap.js" />
<script src = "https://code.highcharts.com/modules/treemap.js" />

В этой главе мы продемонстрируем конфигурацию, необходимую для построения диаграммы с использованием API Highcharts в 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="org.moxieapps.gwt.highcharts.Highcharts"/>
   <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">
         <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />
         <script src = "https://code.highcharts.com/highcharts.js" />
      </script>
   </head>
   <body>    
   </body>
</html>

Мы увидим обновленный HelloWorld.java в конце после понимания настроек.

Шаг 2. Создайте конфигурации

Создать диаграмму

Настройте тип, заголовок и подзаголовок диаграммы.

Chart chart = new Chart()
   .setType(Type.SPLINE)
   .setChartTitleText("Monthly Average Temperature")
   .setChartSubtitleText("Source: WorldClimate.com");

xAxis

Настройте тикер для отображения на оси X.

XAxis xAxis = chart.getXAxis();
xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
   "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

yAxis

Настройте заголовок, линии графика, которые будут отображаться на оси Y.

YAxis yAxis = chart.getYAxis();
yAxis.setAxisTitleText("Temperature °C");
yAxis.createPlotLine()
   .setValue(0)
   .setWidth(1)
   .setColor("#808080");

всплывающая подсказка

Настройте всплывающую подсказку. Поместите суффикс, который будет добавлен после значения (ось Y).

ToolTip toolTip = new ToolTip();
toolTip.setValueSuffix("°C");
chart.setToolTip(toolTip);

легенда

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

legend.setLayout(Legend.Layout.VERTICAL)
   .setAlign(Legend.Align.RIGHT)
   .setVerticalAlign(Legend.VerticalAlign.TOP)
   .setX(-10)
   .setY(100)
   .setBorderWidth(0);
chart.setLegend(legend);

серии

Настройте данные для отображения на графике. Серия - это массив, каждый элемент которого представляет собой одну строку на диаграмме.

chart.addSeries(chart.createSeries()
   .setName("Tokyo")
   .setPoints(new Number[] {
      7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
      26.5, 23.3, 18.3, 13.9, 9.6
   })
);

chart.addSeries(chart.createSeries()
   .setName("New York")
   .setPoints(new Number[] {
      -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
      24.1, 20.1, 14.1, 8.6, 2.5
   })
);

chart.addSeries(chart.createSeries()
   .setName("Berlin")
   .setPoints(new Number[] {
      -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
      17.9, 14.3, 9.0, 3.9, 1.0
   })
);

chart.addSeries(chart.createSeries()
   .setName("London")
   .setPoints(new Number[] {
      3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
      16.6, 14.2, 10.3, 6.6, 4.8
   })
);

Шаг 3: Добавьте диаграмму на родительскую панель.

Мы добавляем диаграмму в корневую панель.

RootPanel.get().add(chart);

пример

Рассмотрим следующий пример, чтобы лучше понять синтаксис конфигурации -

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.XAxis;
import org.moxieapps.gwt.highcharts.client.YAxis;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Chart chart = new Chart()
         .setType(Type.SPLINE)
         .setChartTitleText("Monthly Average Temperature")
         .setChartSubtitleText("Source: WorldClimate.com");

      XAxis xAxis = chart.getXAxis();
      xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun",
         "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

      YAxis yAxis = chart.getYAxis();
      yAxis.setAxisTitleText("Temperature °C");
      yAxis.createPlotLine()
         .setValue(0)
         .setWidth(1)
         .setColor("#808080");

      ToolTip toolTip = new ToolTip();
      toolTip.setValueSuffix("°C");
      chart.setToolTip(toolTip);

      Legend legend = new Legend();
      legend.setLayout(Legend.Layout.VERTICAL)
         .setAlign(Legend.Align.RIGHT)
         .setVerticalAlign(Legend.VerticalAlign.TOP)
         .setX(-10)
         .setY(100)
         .setBorderWidth(0);
      chart.setLegend(legend);

      chart.addSeries(chart.createSeries()
         .setName("Tokyo")
         .setPoints(new Number[] {
            7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("New York")
         .setPoints(new Number[] {
            -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
            24.1, 20.1, 14.1, 8.6, 2.5
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("Berlin")
         .setPoints(new Number[] {
            -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0
         })
      );

      chart.addSeries(chart.createSeries()
         .setName("London")
         .setPoints(new Number[] {
            3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
            16.6, 14.2, 10.3, 6.6, 4.8
         })
      );
      RootPanel.get().add(chart);
   }
}

Результат

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

Линейные диаграммы используются для построения диаграмм на основе линий / сплайнов. В этом разделе мы обсудим различные типы линейных и сплайновых диаграмм.

Sr. No. Тип диаграммы и описание
1 Базовая линия

Базовый линейный график.
2 С метками данных

Диаграмма с метками данных.
3 Временной ряд, масштабируемый

График с временным рядом.
4 Сплайн с перевернутыми осями

Сплайн-диаграмма с перевернутыми осями.
5 Сплайн с символами

Сплайн-диаграмма с использованием символов жары / дождя.
6 Сплайн с полосами сюжета

Сплайн-диаграмма с полосами графика.

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

Sr. No. Тип диаграммы и описание
1 Основная область

Базовая диаграмма с областями.
2 Область с отрицательными значениями

Диаграмма с областями с отрицательными значениями.
3 Сложенная область

Диаграмма с областями, наложенными одна на другую.
4 Процентная площадь

График с данными в процентах.
5 Область с недостающими точками

График с пропущенными точками в данных.
6 Перевернутые оси

Площадь с использованием перевернутых осей.
7 Площадь-сплайн

Диаграмма с областями с использованием сплайна.

Гистограммы используются для построения гистограмм. В этом разделе мы обсудим различные типы столбчатых диаграмм.

Sr. No. Тип диаграммы и описание
1 Базовый бар

Базовая гистограмма.
2 Сложенный бар

Столбиковая диаграмма с наложенными друг на друга столбцами.
3 Гистограмма с отрицательными значениями

Гистограмма с отрицательными значениями.

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

Sr. No. Тип диаграммы и описание
1 Базовая колонка

Базовая гистограмма.
2 Столбец с отрицательными значениями

Гистограмма с отрицательными значениями.
3 Столбец с накоплением

На диаграмме столбцы наложены друг на друга.
4 Столбец с накоплением и сгруппировкой

Диаграмма со столбцами в сгруппированном и накопительном виде.
5 Столбец с накоплением процентов

Диаграмма с накоплением процентов.
6 Столбец с повернутыми метками

Столбчатая диаграмма с повернутыми метками в столбцах.
7 Диапазон столбца

Столбчатая диаграмма с использованием диапазонов.

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

Sr. No. Тип диаграммы и описание
1 Обычный пирог

Базовая круговая диаграмма.
2 Пирог с легендами

Круговая диаграмма с легендами.
3 Пончиковая диаграмма

Пончиковая диаграмма.

Ниже приведен пример базовой диаграммы разброса.

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

Пример базовой диаграммы разброса приведен ниже.

Конфигурации

Давайте теперь посмотрим, какие дополнительные настройки / шаги были предприняты.

серии

Настройте тип диаграммы на разброс. series.typeопределяет тип ряда для диаграммы. Здесь значение по умолчанию - «линия».

chart.addSeries(chart.createSeries()  
   .setName("Observations")  
   .setType(Type.SCATTER)  
   .setPoints(new Number[] {  
      1, 1.5, 2.8, 3.5, 3.9, 4.2  
   })  
);

пример

HelloWorld.java

package com.tutorialspoint.client;

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Series.Type;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      final Chart chart = new Chart()  
         .setChartTitleText("Scatter plot");  

      chart.getXAxis()  
         .setMin(-0.5)  
         .setMax(5.5);  

      chart.getYAxis()  
         .setMin(0);  

      chart.addSeries(chart.createSeries()  
         .setName("Observations")  
         .setType(Type.SCATTER)  
         .setPoints(new Number[] {  
            1, 1.5, 2.8, 3.5, 3.9, 4.2  
         })  
      );  
      RootPanel.get().add(chart);
   }
}

Результат

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

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

Sr. No. Тип диаграммы и описание
1 Сплайн обновляется каждую секунду

Сплайн-диаграмма обновляется каждую секунду.
2 Нажмите, чтобы добавить точку

Диаграмма с возможностью добавления точек.

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

Sr. No. Тип диаграммы и описание
1 Столбец, линия и круговая диаграмма

Диаграмма с столбцом, линией и круговой диаграммой.
2 Двойные оси, линия и столбец

Диаграмма с двойными осями, линией и столбцом.
3 Несколько топоров

Диаграмма с несколькими осями.
4 Разброс с линией регрессии

Точечная диаграмма с линией регрессии.

Трехмерные диаграммы используются для построения трехмерных диаграмм. В этом разделе мы обсудим различные типы трехмерных диаграмм.

Sr. No. Тип диаграммы и описание
1 3D колонна

Трехмерная столбчатая диаграмма.
2 3D-разброс

Точечная диаграмма 3D.
3 3D пирог

3D круговая диаграмма.

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

Sr. No. Тип диаграммы и описание
1 Тепловая карта

Тепловая карта.
2 Древовидная карта

Древовидная карта.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved