Gwt-googlecharts-configuration-syntax
提供:Dev Guides
GWT Google Chart-構成構文
この章では、GWTでGoogle Charts 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="com.googlecode.gwt.charts.Charts"/>
<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">
</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);
Size
設定する幅と高さを構成します。
chart.setWidth("700px");
chart.setHeight("700px");
ステップ3:チャートを親パネルに追加します。
ルートパネルにチャートを追加しています。
RootPanel.get().add(chart);
例
構成構文をさらに理解するには、次の例を検討してください-
*_HelloWorld.java_*
package com.finddevguides.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();
}
}
結果
結果を確認します。