Gwt-highcharts-quick-guide

提供：Dev Guides
移動先:案内、検索

GWTハイチャート-概要

*GWT Highcharts* は、GWTアプリケーション内でエレガントで機能豊富なHighchartsビジュアライゼーションを提供するオープンソースのJavaベースのライブラリであり、GWTウィジェットライブラリとともに使用できます。

特徴

  • 互換性-最新のブラウザーはすべて、iPhone/iPadブラウザーとInternet Explorer 6以降でサポートされています。 最新のブラウザは、グラフィックレンダリングにSVGを使用し、従来のInternet ExplorerのグラフィックはVMLを使用して描画されます。
  • *純粋なJava *-Javaメソッドで完全なHighcharts APIを使用できるため、JavaScriptは必要ありません。
  • * Flashなし*-FlashプレーヤーやJavaなどのクライアント側プラグインはHighchartsがネイティブブラウザーテクノロジを使用し、最新のモバイルデバイスで変更せずにチャートを実行できるため、要件はありません。
  • きれいな構文-ほとんどのメソッドはチェーン可能であるため、チャートの構成オプションはJSONと同じくらい厳密な構文を使用して管理できます。
  • 動的-チャートの作成後、いつでもシリーズとポイントを動的に追加できます。 サポートされているイベントフック。 サーバーの相互作用がサポートされています。
  • 文書化-Highcharts APIは、多数のコードと構文の例とともに完全に文書化されています。

GWTハイチャート-環境設定

このチュートリアルでは、HighchartsとGWT Frameworkで作業を開始するための開発環境を準備する方法について説明します。 このチュートリアルでは、GWT Frameworkをセットアップする前に、マシンでJDK、Tomcat、Eclipseをセットアップする方法も説明します-

システム要件

GWTはJDK 1.6以降を必要とするため、最初の要件はJDKをマシンにインストールすることです。

JDK 1.6 or above.
Memory no minimum requirement.
Disk Space no minimum requirement.
Operating System no minimum requirement.

所定の手順に従って環境をセットアップし、GWTアプリケーション開発を開始します。

ステップ1-マシンでのJavaインストールの検証

コンソールを開き、次のjavaコマンドを実行します。

OS Task Command
Windows Open Command Console c:\> java -version
Linux Open Command Terminal $ java -version
*Mac * Open Terminal machine:~ joseph$ java -version

すべてのオペレーティングシステムの出力を確認しましょう

Sr.No. OS & Generated Output
1
  • Windows*

Javaバージョン "1.6.0_21"

Java（TM）SEランタイム環境（ビルド1.6.0_21-b07）

Java HotSpot（TM）Client VM（ビルド17.0-b17、混合モード、共有）

2

Linux

Javaバージョン "1.6.0_21"

Java（TM）SEランタイム環境（ビルド1.6.0_21-b07）

ava HotSpot（TM）Client VM（ビルド17.0-b17、混合モード、共有）

3

Mac

Javaバージョン "1.6.0_21"

Java（TM）SEランタイム環境（ビルド1.6.0_21-b07）

Java HotSpot（TM）64ビットサーバーVM（ビルド17.0-b17、混合モード、共有）

ステップ2-Java Development Kit（JDK）のセットアップ

Javaがインストールされていない場合は、OracleのJavaサイト（https://www.oracle.com/technetwork/java/javase/downloads/indexl[Java SEダウンロード]）からJavaソフトウェア開発キット（SDK）をインストールできます。 ダウンロードしたファイルにJDKをインストールする手順があります。指定された手順に従ってセットアップをインストールおよび構成します。 最後に、PATHおよびJAVA_HOME環境変数を設定して、javaおよびjavacを含むディレクトリ（通常はそれぞれjava_install_dir/binおよびjava_install_dir）を参照します。 

*JAVA_HOME* 環境変数を設定して、Javaがマシンにインストールされているベースディレクトリの場所を指すようにします。 例えば
Sr.No. OS & Output
1

Windows

環境変数JAVA_HOMEをC：\ Program Files \ Java \ jdk1.6.0_21に設定します

2

Linux

export JAVA_HOME =/usr/local/java-current

3

Mac

export JAVA_HOME =/Library/Java/Home

Javaコンパイラの場所をシステムパスに追加します。

Sr.No. OS & Output
1

Windows

文字列;％JAVA_HOME％\ binをシステム変数Pathの最後に追加します。

2

Linux

export PATH = $ PATH：$ JAVA_HOME/bin/

3

Mac

不要

または、Borland JBuilder、Eclipse、IntelliJ IDEA、Sun ONE Studioなどの統合開発環境（IDE）を使用する場合は、単純なプログラムをコンパイルおよび実行して、IDEがJavaをインストールした場所を認識していることを確認します。 IDEの。

ステップ3-Eclipse IDEのセットアップ

このチュートリアルのすべての例は、Eclipse IDEを使用して作成されています。 そのため、オペレーティングシステムに基づいて、最新バージョンのEclipseをマシンにインストールすることをお勧めします。

Eclipse IDEをインストールするには、https://www.eclipse.org/downloads/から最新のEclipseバイナリをダウンロードします。 インストールをダウンロードしたら、バイナリ配布物を便利な場所に解凍します。 たとえば、WindowsのC：\ eclipse、またはLinux/Unixの/usr/local/eclipseで、最後にPATH変数を適切に設定します。

Eclipseは、Windowsマシンで次のコマンドを実行することで起動できます。または、eclipse.exeをダブルクリックするだけで起動できます 

%C:\eclipse\eclipse.exe

Eclipseは、Unix（Solaris、Linuxなど）マシンで次のコマンドを実行することで起動できます- 

$/usr/local/eclipse/eclipse

正常に起動した後、すべてが正常であれば、次の結果が表示されます-

Eclipseホームページ

ステップ4：GWT SDKとEclipse用プラグインをインストールする

リンクhttps://developers.google.com/web-toolkit/download[Plugin for Eclipse（incl。 SDK）]]を選択して、マシンにインストールされているGWT SDKおよびプラグインfor Eclipseバージョンをインストールします。

GWTプラグインのセットアップが正常に完了した後、すべてが正常であれば、以下に示すように赤い四角形でマークされた* Googleアイコン*で次の画面を表示する必要があります-

Eclipse with Google

ステップ5：Highchartsをインストールする

http://www.moxiegroup.com/moxieapps/gwt-highcharts/download.jsp [ダウンロード]ページから最新のHighcharts jarをダウンロードし、プロジェクトのクラスパスに追加します。

<project-name> .gwt.xmlファイルに次のエントリを追加します 

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

<project-name> lファイルに次のエントリを追加します 

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

GWTハイチャート-構成構文

この章では、GWTでHighcharts APIを使用してグラフを描画するために必要な構成を紹介します。

ステップ1：GWTアプリケーションを作成する

次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-

Step Description
1 Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.client.HelloWorld'/>
   <inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>
   <source path = 'client'/>
   <source path = 'shared'/>
</module>

以下は、変更されたHTMLホストファイル war/HelloWorldl の内容です。 

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

結果

結果を確認します。

基本折れ線グラフ

GWTハイチャート-折れ線グラフ

折れ線グラフは、折れ線/スプラインベースのグラフの描画に使用されます。 このセクションでは、さまざまな種類の折れ線グラフとスプラインベースのグラフについて説明します。

Sr.No. Chart Type & Description
1

Basic line

基本的な折れ線グラフ。

2

With data labels

データラベル付きのグラフ。

3

Time series, zoomable

時系列を使用したグラフ。

4

Spline with inverted axes

反転軸を持つスプライングラフ。

5

Spline with symbols

熱/雨のシンボルを使用したスプラインチャート。

6

Spline with plot bands

プロットバンド付きのスプライングラフ。

GWTハイチャート-エリアチャート

エリアチャートは、エリアベースのチャートを描画するために使用されます。 このセクションでは、さまざまなタイプの面積ベースのチャートについて説明します。

Sr.No. Chart Type & Description
1

Basic Area

基本的な面グラフ。

2

Area with negative values

負の値を持つ面グラフ。

3

Stacked area

互いに積み上げられた領域を持つグラフ。

4

Percentage area

パーセンテージでデータを示すグラフ。

5

Area with missing points

データに欠損点があるチャート。

6

Inverted axes

反転軸を使用するエリア。

7

Area-spline

スプラインを使用した面グラフ。

GWTハイチャート-棒グラフ

棒グラフは、棒グラフを描くために使用されます。 このセクションでは、さまざまなタイプの棒グラフを説明します。

Sr.No. Chart Type & Description
1

Basic Bar

基本的な棒グラフ。

2

Stacked Bar

棒が積み上げられた棒グラフ。

3

Bar Chart with negative values

負の値を持つ棒グラフ。

GWTハイチャート-縦棒グラフ

縦棒グラフは、縦棒ベースのグラフを描画するために使用されます。 このセクションでは、さまざまなタイプの列ベースのチャートについて説明します。

Sr.No. Chart Type & Description
1

Basic Column

基本的な縦棒グラフ。

2

Column with negative values

負の値を持つ縦棒グラフ。

3

Stacked column

列が互いに積み上げられたグラフ。

4

Stacked and Grouped column

積み上げおよびグループ化された形式の列を持つグラフ。

5

Column with stacked percentage

積み上げパーセンテージのグラフ。

6

Column with rotated labels

列にラベルが回転した縦棒グラフ。

7

Column Range

範囲を使用した縦棒グラフ。

GWTハイチャート-円グラフ

円グラフは、円ベースのグラフを描くために使用されます。 このセクションでは、さまざまなタイプの円グラフを説明します。

Sr.No. Chart Type & Description
1

Basic Pie

基本的な円グラフ。

2

Pie with Legends

凡例付きの円グラフ。

3

Donut Chart

ドーナツグラフ。

GWTハイチャート-散布図

以下は、基本的な散布図の例です。

link：/gwt_highcharts/gwt_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。

基本的な散布図の例を以下に示します。

構成

ここで、追加の構成/実行された手順を見てみましょう。

シリーズ

散布図ベースのチャートタイプを構成します。 series.type は、チャートのシリーズタイプを決定します。 ここで、デフォルト値は「line」です。 

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

結果

結果を確認します。

散布図

GWTハイチャート-動的チャート

動的なチャートは、チャートのレンダリング後にデータを変更できるデータベースのチャートを描画するために使用されます。 このセクションでは、さまざまなタイプの動的チャートについて説明します。

Sr.No. Chart Type & Description
1

Spline updating each second

毎秒更新されるスプラインチャート。

2

Click to add a point

ポイント追加機能を備えたチャート。

GWTハイチャート-組み合わせチャート

組み合わせチャートは、混合チャートを描画するために使用されます。たとえば、円グラフ付きの棒グラフ。 このセクションでは、さまざまなタイプの組み合わせチャートについて説明します。

Sr.No. Chart Type & Description
1

Column, Line and Pie

列、線、および円グラフ。

2

Dual Axes, Line and Column

二重軸、線、および列を持つグラフ。

3

Multiple Axes

複数の軸を持つグラフ。

4

Scatter with regression line

回帰線を含む散布図。

GWTハイチャート-3Dチャート

3Dチャートは、3次元チャートを描くために使用されます。 このセクションでは、さまざまなタイプの3Dチャートについて説明します。

Sr.No. Chart Type & Description
1

3D Column

3D縦棒グラフ。

2

3D Scatter

3D散布図。

3

3D Pie

3D円グラフ。

GWTハイチャート-マップチャート

マップチャートは、ヒートマップまたはツリーマップチャートの描画に使用されます。 このセクションでは、さまざまなタイプのマップチャートについて説明します。

Sr.No. Chart Type & Description
1

Heat Map

ヒートマップ。

2

Tree Map

ツリーマップ。

「https://www.finddevguides.com/index.php?title=Gwt-highcharts-quick-guide&oldid=78969」から取得
Powered by MediaWiki