34 バブル・チャート
この章では、系列内のデータ・ポイントに対してバブルを描画する2軸チャートである、バブル・チャートについて説明します。
各データ項目は、2つまたは3つのパラメータによって定義できます。図34-1に、一般的なバブル・チャートを示します。ここでは、各データ項目は、X軸、Y軸およびバブルの半径という3つのパラメータによって表されています。
バブル・チャートの作成
JavaFXアプリケーションでバブル・チャートを作成するには、最低限、BubbleChartクラスをインスタンス化し、横軸と縦軸を定義し、2つまたは3つのパラメータとともにXYChart.Dataクラスのコンストラクタを使用してデータの系列を1つ以上指定する必要があります。図34-1では、データの系列を2つ使用してバブル・チャートを作成しています。各データ項目は、週の番号と製品予算の金額であるX値とY値によって表されています。
例34-1 2つのデータ・パラメータを使用したバブル・チャートの作成
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BubbleChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;
public class BubbleChartSample extends Application {
@Override public void start(Stage stage) {
stage.setTitle("Bubble Chart Sample");
final NumberAxis xAxis = new NumberAxis(1, 53, 4);
final NumberAxis yAxis = new NumberAxis(0, 80, 10);
final BubbleChart<Number,Number> blc = new
BubbleChart<>(xAxis,yAxis);
xAxis.setLabel("Week");
yAxis.setLabel("Product Budget");
blc.setTitle("Budget Monitoring");
XYChart.Series series1 = new XYChart.Series();
series1.setName("Product 1");
series1.getData().add(new XYChart.Data(3, 35));
series1.getData().add(new XYChart.Data(12, 60));
series1.getData().add(new XYChart.Data(15, 15));
series1.getData().add(new XYChart.Data(22, 30));
series1.getData().add(new XYChart.Data(28, 20));
series1.getData().add(new XYChart.Data(35, 41));
series1.getData().add(new XYChart.Data(42, 17));
series1.getData().add(new XYChart.Data(49, 30));
XYChart.Series series2 = new XYChart.Series();
series2.setName("Product 2");
series2.getData().add(new XYChart.Data(8, 15));
series2.getData().add(new XYChart.Data(13, 23));
series2.getData().add(new XYChart.Data(15, 45));
series2.getData().add(new XYChart.Data(24, 30));
series2.getData().add(new XYChart.Data(38, 78));
series2.getData().add(new XYChart.Data(40, 41));
series2.getData().add(new XYChart.Data(45, 57));
series2.getData().add(new XYChart.Data(47, 23));
Scene scene = new Scene(blc);
blc.getData().addAll(series1, series2);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
このアプリケーションをコンパイルして実行した結果を図34-2に示します。
このアプリケーションでは、NumberAxisクラスのコンストラクタ内でデータ範囲の下限と上限、およびティック単位を定義しています。また、各副ティックが特定の週に対応するように、副ティック・カウントが4に設定されています。
縦軸で金額がUSドルでレンダリングされていることを示すには、例34-2に示すように、ティック・ラベル・フォーマッタを使用します。
例34-2 ティック・ラベルのフォーマット
yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis,"$ ",null));
NumberAxis.DefaultFormatterクラスは、指定した軸のティック・ラベルに接頭辞と接尾辞を追加します。例34-2では、フォーマッタが縦軸のティック・ラベルごとにドル記号($)の接頭辞を定義しています。接尾辞パラメータがnull値である場合、接尾辞が追加されないことを示します。図34-3に、フォーマットが適用された後のバブル・チャートを示します。
追加の値プロパティの使用
図34-1に示すバブル・チャートは、2つの製品の1年間の予算に関する情報を示しています。ただし、このアプリケーションを拡張し、BubbleChartクラスの追加機能を活用することもできます。バブル・チャートのデータの系列を指定する際にextraValueプロパティを使用し、XYChart.Dataオブジェクトで3つのパラメータを定義します。
例34-3に示すコード・フラグメントは、特定の製品について費やされた予算のパーセンテージを各バブルが表すように、Budget Monitoringアプリケーションのデータ系列を変更する方法を示しています。XYChart.Dataオブジェクトの3番目のパラメータは、各バブルの半径を定義しています。半径が大きくなるほど、費やされた予算のパーセンテージが大きくなります。したがって、たとえば、半径の値7.5は75%の使用に対応し、値5.5は55%の使用に対応しています。
例34-3 値の追加
XYChart.Series series1 = new XYChart.Series();
series1.setName("Product 1");
series1.getData().add(new XYChart.Data(3, 35, 2));
series1.getData().add(new XYChart.Data(12, 60, 1.8));
series1.getData().add(new XYChart.Data(15, 15, 7));
series1.getData().add(new XYChart.Data(22, 30, 2.5));
series1.getData().add(new XYChart.Data(28, 20, 1));
series1.getData().add(new XYChart.Data(35, 41, 5.5));
series1.getData().add(new XYChart.Data(42, 17, 9));
series1.getData().add(new XYChart.Data(49, 30, 1.8));
XYChart.Series series2 = new XYChart.Series();
series2.setName("Product 2");
series2.getData().add(new XYChart.Data(8, 15, 2));
series2.getData().add(new XYChart.Data(13, 23, 1));
series2.getData().add(new XYChart.Data(15, 45, 3));
series2.getData().add(new XYChart.Data(24, 30, 4.5));
series2.getData().add(new XYChart.Data(38, 78, 1));
series2.getData().add(new XYChart.Data(40, 41, 7.5));
series2.getData().add(new XYChart.Data(45, 57, 2));
series2.getData().add(new XYChart.Data(47, 23, 3.8));
変更したコード・フラグメントを「Budget Monitoring」アプリケーションに追加し、このアプリケーションをコンパイルして実行した結果を図34-4に示します。
描画とティック・マークの外観の視覚設定の変更
チャートの描画と軸の外観を変更できます。JavaFX SDK APIに用意されているメソッドとプロパティを確認し、「Budget Monitoring」アプリケーションの外観を変更します。
verticalGridLinesVisibleおよびhorizontalGridLinesVisibleプロパティは、グリッド線の表示を有効または無効にします。
描画プロパティ以外にも、軸のプロパティを変更して必要な外観を実現できます。例34-4のコード行では、ティック・ラベルに対してCHOCOLATE色を指定しています。
例34-4 ティック・ラベルの塗りつぶしの色の定義
xAxis.setTickLabelFill(Color.CHOCOLATE); yAxis.setTickLabelFill(Color.CHOCOLATE);
最後に、ティック・マークに対するティック・ラベルの位置を調整できます。setTickLabelGapメソッドを使用して、yAxis.setTickLabelGap(10)のように、縦軸上のティック・ラベルとティック・マーク線の間のギャップを指定します。
図34-5に、すべての変更をコードに組み込んだ後の「Budget Monitoring」アプリケーションの出力を示します。
関連APIドキュメント
