31 円グラフ
この章では、スライスと呼ばれる三角形のウェッジに分けられた円の形式でデータを表すグラフについて説明します。 各スライスは、特定の値に対応するパーセンテージを表します。
図31-1に、PieChartクラスを使用して作成された円グラフを示します。 スライスの色は、PieChart.Data配列に追加された対応するデータ項目の順序によって定義されます。
円グラフの作成
JavaFXアプリケーションで円グラフを作成するには、最低限、PieChartクラスをインスタンス化し、データを定義し、データ項目をPieChartオブジェクトに追加し、グラフをアプリケーションに追加する必要があります。 円グラフを作成する場合、表示するスライスと同じ数のPieChart.Dataオブジェクトを定義します。 PieChart.Dataオブジェクトごとに2つのフィールド(円スライスの名前および対応する値)があります。 例31-1では、基本的な円グラフを作成しています。
例31-1 円グラフの作成
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.chart.*;
import javafx.scene.Group;
public class PieChartSample extends Application {
@Override public void start(Stage stage) {
Scene scene = new Scene(new Group());
stage.setTitle("Imported Fruits");
stage.setWidth(500);
stage.setHeight(500);
ObservableList<PieChart.Data> pieChartData =
FXCollections.observableArrayList(
new PieChart.Data("Grapefruit", 13),
new PieChart.Data("Oranges", 25),
new PieChart.Data("Plums", 10),
new PieChart.Data("Pears", 22),
new PieChart.Data("Apples", 30));
final PieChart chart = new PieChart(pieChartData);
chart.setTitle("Imported Fruits");
((Group) scene.getRoot()).getChildren().add(chart);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
このアプリケーションのコンパイルと実行の結果を図31-2に示します。
基本的な設定に加えて、例31-1では、setTitleメソッドをコールすることによってグラフのタイトルを指定しています。
円グラフと凡例の設定
円グラフのデフォルトのビューには、ラベルが付いた円とグラフの凡例が含まれます。 ラベルの値は、PieChart.Dataオブジェクトの名前フィールドから取得されます。 ラベルの外観は、setLabelsVisileメソッドを使用して管理できます。 同様に、グラフの凡例の外観は、setLegendVisibleメソッドをコールして管理できます。
ラベルと凡例の位置は変更できます。 setLabelLineLengthメソッドを使用すると、円周とラベル間の線の長さを指定できます。 円に対する凡例のデフォルトの位置を変更するには、setLegendSideメソッドを使用します。 例31-2では、例31-1で作成したグラフにこれらのメソッドを適用する方法を示しています。
これらの行をアプリケーション・コードに追加し、アプリケーションを実行した結果を図31-3に示します。
アプリケーションによっては、円内でスライスを配置する方向の変更が必要になる場合があります。 デフォルトでは、スライスは時計回りに配置されます。 ただし、これはsetClockwiseメソッドにfalseを指定(chart.setClockwise(false))すると変更できます。 このメソッドをsetStartAngleメソッドと組み合せて使用することにより、スライスを目的の位置に配置します。 図31-4に、chartオブジェクトに対してsetStartAngle(180)メソッドをコールしたときに円グラフの外観がどう変わるかを示します。
円グラフのイベントの処理
円グラフのスライスはNodeオブジェクトではありませんが、各PieChart.Data要素にはノードが関連付けられており、これを使用してイベントを分析し、その結果に応じてこれらを処理できます。 例31-3に示すコード・フラグメントでは、特定のグラフ・スライスに当てはまるMOUSE_PRESSEDイベントを処理するためにEventHandlerオブジェクトが作成されています。
例31-3 円グラフのマウス・イベントの処理
final Label caption = new Label("");
caption.setTextFill(Color.DARKORANGE);
caption.setStyle("-fx-font: 24 arial;");
for (final PieChart.Data data : chart.getData()) {
data.getNode().addEventHandler(MouseEvent.MOUSE_PRESSED,
new EventHandler<MouseEvent>() {
@Override public void handle(MouseEvent e) {
caption.setTranslateX(e.getSceneX());
caption.setTranslateY(e.getSceneY());
caption.setText(String.valueOf(data.getPieValue()) + "%");
}
});
}
このコード・フラグメントをアプリケーション・コードに追加し、コンパイルして実行すると、アプリケーションがマウスのクリックに反応し始めます。 図31-5に、ユーザーが対応するスライスをクリックしたときに「Pears」に表示される値を示します。
このコーディング・パターンを使用することにより、様々なイベントを処理したり、グラフ全体やスライスに視覚効果を適用できます。
関連APIドキュメント
