GWT Highcharts - Hızlı Kılavuz

GWT Highcharts bir GWT uygulaması içinde zarif ve zengin özelliklere sahip Highcharts görselleştirmeleri sağlayan açık kaynaklı bir Java tabanlı kitaplıktır ve GWT pencere öğesi kitaplıkları ile birlikte kullanılabilir.

Özellikleri

  • Compatible- Tüm modern tarayıcılar, iPhone / iPad tarayıcıları ve Internet Explorer 6'dan itibaren desteklenir. Modern tarayıcılar, grafik oluşturma için SVG kullanır ve eski Internet Explorer'da grafikler VML kullanılarak çizilir.

  • Pure Java - Java yöntemlerinde eksiksiz Highcharts API mevcut olduğundan JavaScript gerekli değildir.

  • No Flash - Highcharts yerel tarayıcı teknolojilerini kullandığından ve grafikler modern mobil cihazlarda değişiklik yapılmadan çalışabildiğinden, Flash oynatıcı veya Java gibi istemci tarafı eklentilerine gerek yoktur.

  • Clean Syntax - Yöntemlerin çoğu zincirlenebilir, bu nedenle grafiğin yapılandırma seçenekleri JSON kadar sıkı sözdizimi kullanılarak yönetilebilir.

  • Dynamic- Grafik oluşturulduktan sonra herhangi bir zamanda seriler ve noktalar dinamik olarak eklenebilir. Etkinlik kancaları desteklenir. Sunucu etkileşimleri desteklenir.

  • Documented - Highcharts API'leri, çok sayıda kod ve sözdizimi örnekleriyle kapsamlı bir şekilde belgelenmiştir.

Bu eğitim, Highcharts ve GWT Framework ile çalışmanıza başlamak için bir geliştirme ortamını nasıl hazırlayacağınız konusunda size rehberlik edecektir. Bu eğitici ayrıca, GWT Framework'ü kurmadan önce makinenizde JDK, Tomcat ve Eclipse'in nasıl kurulacağını da öğretecektir -

Sistem gereksinimleri

GWT, JDK 1.6 veya üstünü gerektirir, bu nedenle ilk gereksinim, makinenizde JDK'nın kurulu olmasıdır.

JDK 1.6 veya üstü.
Hafıza minimum gereklilik yok.
Disk alanı minimum gereklilik yok.
İşletim sistemi minimum gereklilik yok.

GWT uygulama geliştirmeye başlamak için ortamınızı ayarlamak için verilen adımları izleyin.

Adım 1 - Makinenizde Java Kurulumunu Doğrulayın

Şimdi konsolu açın ve aşağıdaki java komutunu çalıştırın.

işletim sistemi Görev Komut
Windows Komut Konsolunu Aç c: \> java sürümü
Linux Komut Terminalini Aç $ java sürümü
Mac Açık Terminal makine: ~ joseph $ java -version

Tüm işletim sistemleri için çıktıyı doğrulayalım

Sr.No. İşletim Sistemi ve Oluşturulan Çıktı
1

Windows

java sürümü "1.6.0_21"

Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07)

Java HotSpot (TM) Client VM (derleme 17.0-b17, karma mod, paylaşım)
2

Linux

java sürümü "1.6.0_21"

Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07)

ava HotSpot (TM) Client VM (derleme 17.0-b17, karma mod, paylaşım)
3

Mac

java sürümü "1.6.0_21"

Java (TM) SE Çalışma Zamanı Ortamı (derleme 1.6.0_21-b07)

Java HotSpot (TM) 64-Bit Sunucu VM (derleme 17.0-b17, karma mod, paylaşım)

Adım 2 - Java Geliştirme Kitini (JDK) Kurun

Java yüklemediyseniz, Java Yazılım Geliştirme Kiti'ni (SDK) Oracle'ın Java sitesinden yükleyebilirsiniz: Java SE İndirmeleri . İndirilen dosyalara JDK kurulumu için talimatlar bulacaksınız, kurulumu kurmak ve yapılandırmak için verilen talimatları izleyin. Son olarak, PATH ve JAVA_HOME ortam değişkenlerini java ve javac içeren dizine, tipik olarak sırasıyla java_install_dir / bin ve java_install_dir'e başvuracak şekilde ayarlayın.

Yı kur JAVA_HOMEJava'nın makinenizde kurulu olduğu temel dizin konumunu gösteren ortam değişkeni. Örneğin

Sr.No. İşletim Sistemi ve Çıktı
1

Windows

JAVA_HOME ortam değişkenini C: \ Program Files \ Java \ jdk1.6.0_21 olarak ayarlayın
2

Linux

dışa aktar JAVA_HOME = / usr / local / java-current
3

Mac

dışa aktar JAVA_HOME = / Kitaplık / Java / Ana Sayfa

Java derleyici konumunu Sistem Yoluna ekleyin.

Sr.No. İşletim Sistemi ve Çıktı
1

Windows

Dizeyi;% JAVA_HOME% \ bin sistem değişkeninin, Yol'un sonuna ekleyin.
2

Linux

dışa aktar PATH = $ PATH: $ JAVA_HOME / bin /
3

Mac

gerekli değil

Alternatif olarak, Borland JBuilder, Eclipse, IntelliJ IDEA veya Sun ONE Studio gibi bir Entegre Geliştirme Ortamı (IDE) kullanıyorsanız, IDE'nin Java'yı nereye yüklediğinizi bildiğini doğrulamak için basit bir program derleyin ve çalıştırın, aksi takdirde verilen belgeye göre uygun kurulumu yapın IDE'nin.

Adım 3 - Eclipse IDE'yi Kurun

Bu eğitimdeki tüm örnekler Eclipse IDE kullanılarak yazılmıştır. Bu yüzden, işletim sisteminize bağlı olarak makinenize Eclipse'in en son sürümünü yüklemenizi öneririm.

Eclipse IDE'yi yüklemek için en son Eclipse ikili dosyalarını indirin https://www.eclipse.org/downloads/. Kurulumu indirdikten sonra, ikili dağıtımı uygun bir konuma açın. Örneğin, Windows'ta C: \ eclipse'de veya Linux / Unix'te / usr / local / eclipse'de ve son olarak PATH değişkenini uygun şekilde ayarlayın.

Eclipse, Windows makinesinde aşağıdaki komutları çalıştırarak başlatılabilir veya eclipse.exe dosyasına çift tıklayabilirsiniz.

%C:\eclipse\eclipse.exe

Eclipse, Unix (Solaris, Linux, vb.) Makinesinde aşağıdaki komutlar çalıştırılarak başlatılabilir -

$/usr/local/eclipse/eclipse

Başarılı bir başlangıçtan sonra, her şey yolundaysa, aşağıdaki sonucu göstermelidir -

4. Adım: Eclipse için GWT SDK ve Eklentisini Kurun

Makinenizde GWT SDK ve Eclipse için Eklenti sürümünü yüklemek için Eclipse için Eklenti (SDK'lar dahil) bağlantısında verilen talimatları izleyin .

GWT eklentisi için başarılı bir kurulumdan sonra, her şey yolundaysa, aşağıdaki ekranı göstermelidir. Google icon aşağıda gösterildiği gibi kırmızı dikdörtgenle işaretlenmiştir -

5. Adım: Highcharts'ı yükleyin

En son Highcharts jar dosyasını İndirme sayfasından indirin ve projenin sınıf yoluna ekleyin.

Aşağıdaki girişi <proje adı> .gwt.xml dosyasına ekleyin

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

Aşağıdaki girişi <proje adı> .html dosyasına ekleyin

<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" />

Bu bölümde, GWT'de Highcharts API kullanarak bir grafik çizmek için gereken yapılandırmayı göstereceğiz.

Adım 1: GWT Uygulaması Oluşturun

GWT - Uygulama Oluştur bölümünde oluşturduğumuz GWT uygulamasını güncellemek için aşağıdaki adımları izleyin -

Adım Açıklama
1 GWT - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint paketinin altında HelloWorld adıyla bir proje oluşturun .
2 Değiştir HelloWorld.gwt.xml , HelloWorld.html ve HelloWorld.java olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun.
3 Uygulanan mantığın sonucunu doğrulamak için uygulamayı derleyin ve çalıştırın.

Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır 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>

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir 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>

Yapılandırmaları anladıktan sonra güncellenmiş HelloWorld.java dosyasını sonunda göreceğiz.

2. Adım: Konfigürasyonlar Oluşturun

Grafik Oluştur

Grafiğin türünü, başlığını ve alt başlığını yapılandırın.

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

xAxis

Kayan şeridi X Ekseni üzerinde görüntülenecek şekilde yapılandırın.

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

yAxis

Y Ekseninde görüntülenecek başlık, çizim çizgilerini yapılandırın.

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

araç ipucu

Araç ipucunu yapılandırın. Değerden sonra eklenecek son eki (y ekseni) koyun.

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

efsane

Göstergeyi, diğer özelliklerle birlikte grafiğin sağ tarafında görüntülenecek şekilde yapılandırın.

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

dizi

Grafikte görüntülenecek verileri yapılandırın. Seri, bu dizinin her öğesinin grafikte tek bir satırı temsil ettiği bir dizidir.

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
   })
);

Adım 3: Grafiği üst panele ekleyin.

Grafiği kök panele ekliyoruz.

RootPanel.get().add(chart);

Misal

Yapılandırma Sözdizimini daha iyi anlamak için aşağıdaki örneği düşünün -

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);
   }
}

Sonuç

Sonucu doğrulayın.

Çizgi grafikler, çizgi / spline tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı çizgi ve eğri tabanlı çizelgeleri tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Temel çizgi

Temel çizgi grafiği.
2 Veri etiketleri ile

Veri etiketleri içeren grafik.
3 Zaman serileri, yakınlaştırılabilir

Zaman serileri ile grafik.
4 Ters eksenli spline

Ters eksenlere sahip eğri grafik.
5 Sembollerle eğri çizgi

Isı / yağmur için semboller kullanan eğri grafik.
6 Çizim bantlı spline

Çizim bantları içeren eğri grafik.

Alan grafikleri, alan tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı alan tabanlı grafik türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Temel Alan

Temel alan grafiği.
2 Negatif değerli alan

Negatif değerlere sahip alan grafiği.
3 Yığılmış alan

Üst üste yığılmış alanları olan grafik.
4 Yüzde alanı

Yüzde cinsinden veriler içeren grafik.
5 Eksik noktaları olan alan

Verilerdeki eksik noktaları içeren grafik.
6 Ters eksenler

Ters eksenleri kullanan alan.
7 Alan-eğri

Spline kullanarak alan grafiği.

Çubuk grafikler, çubuk tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı çubuk tabanlı grafik türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Temel Çubuk

Temel çubuk grafik.
2 Yığılmış Çubuk

Üst üste yığılmış çubuklara sahip çubuk grafik.
3 Negatif değerler içeren Çubuk Grafik

Negatif değerler içeren Çubuk Grafik.

Sütun grafikleri, sütun tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı sütun tabanlı grafik türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Temel Sütun

Temel sütun grafiği.
2 Negatif değerler içeren sütun

Negatif değerlere sahip sütun grafiği.
3 Yığılmış sütun

Sütun üst üste yığılmış grafik.
4 Yığılmış ve Gruplanmış sütun

Yığılmış ve gruplanmış formda sütun içeren grafik.
5 Yığılmış yüzdeli sütun

Yığılmış yüzdeli grafik.
6 Döndürülmüş etiketli sütun

Sütunlarda döndürülmüş etiketlere sahip Sütun Grafiği.
7 Sütun Aralığı

Aralıkları kullanan Sütun Grafiği.

Pasta grafikler, pasta tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı pasta tabanlı grafik türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Temel Pasta

Temel pasta grafiği.
2 Efsanelerle Pasta

Efsanelerle pasta grafik.
3 Halka Grafik

Halka Şeması.

Aşağıda temel bir dağılım grafiği örneği verilmiştir.

Highcharts Configuration Syntax bölümünde bir grafik çizmek için kullanılan konfigürasyonu daha önce görmüştük .

Temel dağılım grafiğine bir örnek aşağıda verilmiştir.

Konfigürasyonlar

Şimdi atılan ek yapılandırmaları / adımları görelim.

dizi

Grafik türünü dağılım tabanlı olacak şekilde yapılandırın. series.typegrafik için seri türüne karar verir. Burada varsayılan değer "line" dır.

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

Misal

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);
   }
}

Sonuç

Sonucu doğrulayın.

Dinamik grafikler, grafik oluşturulduktan sonra verilerin değişebileceği veri tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı dinamik grafik türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Her saniye spline güncelleniyor

Spline Grafiği her saniye güncelleniyor.
2 Bir nokta eklemek için tıklayın

Nokta toplama özelliğine sahip grafik.

Karma grafikler, karma grafikler çizmek için kullanılır; örneğin, pasta grafik içeren çubuk grafik. Bu bölümde, farklı kombinasyon tablo türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Sütun, Çizgi ve Pasta

Sütun, Çizgi ve Pasta ile Grafik.
2 Çift Eksen, Çizgi ve Sütun

Çift Eksenli, Çizgi ve Sütunlu Grafik.
3 Çoklu Eksenler

Çoklu Eksene Sahip Grafik.
4 Regresyon çizgisiyle dağılım

Regresyon çizgisine sahip dağılım grafiği.

3 boyutlu grafikler çizmek için 3 boyutlu grafikler kullanılır. Bu bölümde, farklı 3B grafik türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 3B Sütun

3D Sütun Şeması.
2 3B Dağılım

3D Dağılım Grafiği.
3 3D Pasta

3D Pasta Grafiği.

Harita grafikleri, ısı haritası veya Ağaç haritası grafikleri çizmek için kullanılır. Bu bölümde, farklı Harita grafiği türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Sıcaklık haritası

Sıcaklık haritası.
2 Ağaç Haritası

Ağaç Haritası.
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