33 面グラフ
この章では、2軸チャートのもう1つのタイプである面グラフについて説明します。
折れ線グラフと同じように、データは、直線で結ばれた一連の点として表示されます。ただし、軸と線の間の面には色が付けられます。データの系列ごとに異なる色が付けられます。図33-1に、データの系列が2つある面グラフを示します。
面グラフの作成
アプリケーションで簡単な面グラフを作成するには、最低限、2つの軸を定義し、AreaChart
クラスをインスタンス化してAreaChart
オブジェクトを作成し、XYChart.Series
クラスを使用してデータの系列を1つ以上作成し、データをグラフに割り当てる必要があります。
AreaChart
クラスをインスタンス化する場合、コンストラクタ内でデータの系列が含まれる監視可能リストを指定することも、後でAreaChart
オブジェクトに対してgetData
およびaddAll
メソッドをコールしてデータの系列を追加することもできます。
例33-1では、温度モニタリング・データを表す面グラフを作成しています。この例では、AprilとMayの期間について収集された2つのデータの系列を使用しています。
例33-1 面グラフの作成
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.chart.AreaChart; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart; import javafx.stage.Stage; public class AreaChartSample extends Application { @Override public void start(Stage stage) { stage.setTitle("Area Chart Sample"); final NumberAxis xAxis = new NumberAxis(1, 31, 1); final NumberAxis yAxis = new NumberAxis(); final AreaChart<Number,Number> ac = new AreaChart<>(xAxis,yAxis); ac.setTitle("Temperature Monitoring (in Degrees C)"); XYChart.Series seriesApril= new XYChart.Series(); seriesApril.setName("April"); seriesApril.getData().add(new XYChart.Data(1, 4)); seriesApril.getData().add(new XYChart.Data(3, 10)); seriesApril.getData().add(new XYChart.Data(6, 15)); seriesApril.getData().add(new XYChart.Data(9, 8)); seriesApril.getData().add(new XYChart.Data(12, 5)); seriesApril.getData().add(new XYChart.Data(15, 18)); seriesApril.getData().add(new XYChart.Data(18, 15)); seriesApril.getData().add(new XYChart.Data(21, 13)); seriesApril.getData().add(new XYChart.Data(24, 19)); seriesApril.getData().add(new XYChart.Data(27, 21)); seriesApril.getData().add(new XYChart.Data(30, 21)); XYChart.Series seriesMay = new XYChart.Series(); seriesMay.setName("May"); seriesMay.getData().add(new XYChart.Data(1, 20)); seriesMay.getData().add(new XYChart.Data(3, 15)); seriesMay.getData().add(new XYChart.Data(6, 13)); seriesMay.getData().add(new XYChart.Data(9, 12)); seriesMay.getData().add(new XYChart.Data(12, 14)); seriesMay.getData().add(new XYChart.Data(15, 18)); seriesMay.getData().add(new XYChart.Data(18, 25)); seriesMay.getData().add(new XYChart.Data(21, 25)); seriesMay.getData().add(new XYChart.Data(24, 23)); seriesMay.getData().add(new XYChart.Data(27, 26)); seriesMay.getData().add(new XYChart.Data(31, 26)); Scene scene = new Scene(ac,800,600); ac.getData().addAll(seriesApril, seriesMay); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } }
この例では、横軸と縦軸上で数値データを表すために2つのNumberAxis
オブジェクトが作成されています。横軸(X)でレンダリングされる値はXYChart.Data
オブジェクトの最初のパラメータから取得されます。一方、縦軸(Y)のデータは2番目のパラメータが提供します。
データの系列は、getData
およびaddAll
メソッドを使用してグラフに割り当てられています。seriesMay
データは最後に追加されるため、対応する緑色の面が、Aprilのデータを表す黄色の面の上に重なって表示されます。
アプリケーションをコンパイルして実行した結果を図33-2に示します。
積上げ面グラフの作成
面グラフのデータは、StackedAreaChart
クラスを使用して表すことができます。このクラスでは、各面が積み上げてビルドされるため、データの各系列は隣接しますが、先行するデータの系列と重なり合いません。例33-2では、このタスクを実装しています。
例33-2 積上げ面グラフの作成
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.StackedAreaChart; import javafx.scene.chart.XYChart; import javafx.stage.Stage; public class StackedAreaChartSample extends Application { final NumberAxis xAxis = new NumberAxis(1, 31, 1); final NumberAxis yAxis = new NumberAxis(); final StackedAreaChart<Number, Number> sac = new StackedAreaChart<>(xAxis, yAxis); @Override public void start(Stage stage) { stage.setTitle("Area Chart Sample"); sac.setTitle("Temperature Monitoring (in Degrees C)"); XYChart.Series<Number, Number> seriesApril = new XYChart.Series<>(); seriesApril.setName("April"); seriesApril.getData().add(new XYChart.Data(1, 4)); seriesApril.getData().add(new XYChart.Data(3, 10)); seriesApril.getData().add(new XYChart.Data(6, 15)); seriesApril.getData().add(new XYChart.Data(9, 8)); seriesApril.getData().add(new XYChart.Data(12, 5)); seriesApril.getData().add(new XYChart.Data(15, 18)); seriesApril.getData().add(new XYChart.Data(18, 15)); seriesApril.getData().add(new XYChart.Data(21, 13)); seriesApril.getData().add(new XYChart.Data(24, 19)); seriesApril.getData().add(new XYChart.Data(27, 21)); seriesApril.getData().add(new XYChart.Data(30, 21)); XYChart.Series<Number, Number> seriesMay = new XYChart.Series<>(); seriesMay.setName("May"); seriesMay.getData().add(new XYChart.Data(1, 20)); seriesMay.getData().add(new XYChart.Data(3, 15)); seriesMay.getData().add(new XYChart.Data(6, 13)); seriesMay.getData().add(new XYChart.Data(9, 12)); seriesMay.getData().add(new XYChart.Data(12, 14)); seriesMay.getData().add(new XYChart.Data(15, 18)); seriesMay.getData().add(new XYChart.Data(18, 25)); seriesMay.getData().add(new XYChart.Data(21, 25)); seriesMay.getData().add(new XYChart.Data(24, 23)); seriesMay.getData().add(new XYChart.Data(27, 26)); seriesMay.getData().add(new XYChart.Data(31, 26)); Scene scene = new Scene(sac, 800, 600); sac.getData().addAll(seriesApril, seriesMay); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } }
このアプリケーションをコンパイルして実行すると、図33-3に示すグラフが作成されます。
図33-3に示すデータを図33-2の同じデータと比較してください。積上げ面グラフ内の面では、横軸上の任意の点において縦軸の値が累積して表示されます。たとえば、積上げ面グラフ内で5月15日に表示されている縦軸上の値は36ですが、これはこの日の実際の温度とは一致しません。この値は、4月15日と5月15日の温度の累積結果を表します。
JavaFXアプリケーションで面グラフを開発する場合、縦軸のデータは面グラフのタイプ(AreaChart
またはStackedAreaChart
)に応じて解釈されることに注意してください。アプリケーションのタスクに最も適したデータ表現を選択してください。
軸プロパティとティック・プロパティの設定
図33-2および図33-3の「Temperature Monitoring」アプリケーションの出力は、ユーザーフレンドリな方法ではなく、デフォルトの二重フォーマットで軸に数値が表示されています。たとえば、日付は浮動小数点値ではなく、1から31までの範囲内の整数である必要があります。
JavaFX SDK APIには、グラフの軸上でレンダリングされた値の外観を調整するために複数のメソッドが用意されています。図33-4に、グラフの軸のメイン要素を示します。これには、範囲の数値を示すティック・マークとティック・ラベルが含まれます。
例33-3に示すように、NumberAxis
クラスのコンストラクタまたは対応するメソッドを使用して数値範囲内の最小値と最大値を指定できます。
例33-3 横軸のデータ範囲の指定
//Using the NumberAxis constructor final NumberAxis xAxis = new NumberAxis(1, 31, 1); //Using the corresponding methods xAxis.setLowerBound(1); xAxis.setUpperBound(31); xAxis.setTickUnit(1);
NumberAxis
クラスの3パラメータのコンストラクタを使用する場合、最初のパラメータは範囲内の最小値を定義し、2番目のパラメータは範囲内の最大値であり、3番目のパラメータはティック単位(軸上の2つのティック・マーク間の値)を定義することに注意してください。
また、横軸に副ティックを表示しないようにする場合は、例33-4に示すように、minorTickCount
プロパティに0を指定します。
このプロパティは、各主ティック・マーク間に表示される副ティックの数を定義します。この値を0に設定することにより、横軸の副ティックを無効にします。
例33-3および例33-4のコード行を「Temperature Monitoring」アプリケーションに追加すると、横軸が図33-5に示すように変更されます。
アプリケーションにティック・ラベルを表示する必要がない場合、setTickLabelsVisible
メソッドにfalse
値を使用します。同様に、ティック・マークを表示しない場合、setTickMarkVisible
にfalse
値を使用します。
縦軸の値の範囲を調整するには、例33-5に示すコード行を使用します。
副ティック・マークと主ティック・マークの長さが同じになるようにティック・マークを調整することもできます。例33-6に示すように、tickLength
およびminorTickLength
プロパティを使用します。
例33-5および例33-6のコード行を「Temperature Monitoring」アプリケーションに追加すると、縦軸が図33-6に示すように変更されます。
負の値の追加
「Temperature Monitoring」アプリケーションの縦軸はNumberAxis
クラスを使用して作成されるため、面グラフ・データに負の値を指定できます。
例33-7に示すように、データの系列をもう1つ作成します。
例33-7 負の値があるデータの系列の追加
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.chart.AreaChart; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart; import javafx.stage.Stage; public class AreaChartSample extends Application { @Override public void start(Stage stage) { stage.setTitle("Area Chart Sample"); final NumberAxis xAxis = new NumberAxis(1, 31, 1); xAxis.setMinorTickCount(0); final NumberAxis yAxis = new NumberAxis(-5, 27, 5); yAxis.setMinorTickLength(yAxis.getTickLength()); yAxis.setForceZeroInRange(false); final AreaChart<Number,Number> ac = new AreaChart<Number,Number>(xAxis,yAxis); ac.setTitle("Temperature Monitoring (in Degrees C)"); XYChart.Series seriesApril= new XYChart.Series(); seriesApril.setName("April"); seriesApril.getData().add(new XYChart.Data(0, 4)); seriesApril.getData().add(new XYChart.Data(3, 10)); seriesApril.getData().add(new XYChart.Data(6, 15)); seriesApril.getData().add(new XYChart.Data(9, 8)); seriesApril.getData().add(new XYChart.Data(12, 5)); seriesApril.getData().add(new XYChart.Data(15, 18)); seriesApril.getData().add(new XYChart.Data(18, 15)); seriesApril.getData().add(new XYChart.Data(21, 13)); seriesApril.getData().add(new XYChart.Data(24, 19)); seriesApril.getData().add(new XYChart.Data(27, 21)); seriesApril.getData().add(new XYChart.Data(30, 21)); XYChart.Series seriesMay = new XYChart.Series(); seriesMay.setName("May"); seriesMay.getData().add(new XYChart.Data(0, 20)); seriesMay.getData().add(new XYChart.Data(3, 15)); seriesMay.getData().add(new XYChart.Data(6, 13)); seriesMay.getData().add(new XYChart.Data(9, 12)); seriesMay.getData().add(new XYChart.Data(12, 14)); seriesMay.getData().add(new XYChart.Data(15, 18)); seriesMay.getData().add(new XYChart.Data(18, 25)); seriesMay.getData().add(new XYChart.Data(21, 25)); seriesMay.getData().add(new XYChart.Data(24, 23)); seriesMay.getData().add(new XYChart.Data(27, 26)); seriesMay.getData().add(new XYChart.Data(31, 26)); XYChart.Series seriesMarch = new XYChart.Series(); seriesMarch.setName("March"); seriesMarch.getData().add(new XYChart.Data(0, -2)); seriesMarch.getData().add(new XYChart.Data(3, -4)); seriesMarch.getData().add(new XYChart.Data(6, 0)); seriesMarch.getData().add(new XYChart.Data(9, 5)); seriesMarch.getData().add(new XYChart.Data(12, -4)); seriesMarch.getData().add(new XYChart.Data(15, 6)); seriesMarch.getData().add(new XYChart.Data(18, 8)); seriesMarch.getData().add(new XYChart.Data(21, 14)); seriesMarch.getData().add(new XYChart.Data(24, 4)); seriesMarch.getData().add(new XYChart.Data(27, 6)); seriesMarch.getData().add(new XYChart.Data(31, 6)); Scene scene = new Scene(ac,800,600); ac.getData().addAll(seriesMarch, seriesApril, seriesMay); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } }
図33-7に、March、April、およびMayの3か月について天候データを表示するよう変更された「Temperature Monitoring」アプリケーションを示します。
面グラフのスタイル設定
例33-7の各月の色は、addAll
メソッドで宣言されている対応するデータの系列の順序によって定義されます。これが、図33-7でMarchの面が黄色で塗られている理由です。AreaChart
オブジェクトの色はCSSを介して設定できます。
Chart.css
ファイルを作成し、AreaChartSample
アプリケーションのメイン・クラスと同じディレクトリに保存します。例33-8に示す行をChart.css
ファイルに追加します。
例33-8 面グラフのCSSスタイル
.default-color0.chart-area-symbol { -fx-background-color: #e9967a, #ffa07a; } .default-color1.chart-area-symbol { -fx-background-color: #f0e68c, #fffacd; } .default-color2.chart-area-symbol { -fx-background-color: #dda0dd, #d8bfd855; } .default-color0.chart-series-area-line { -fx-stroke: #e9967a; } .default-color1.chart-series-area-line { -fx-stroke: #f0e68c; } .default-color2.chart-series-area-line { -fx-stroke: #dda0dd; } .default-color0.chart-series-area-fill { -fx-fill: #ffa07a55; } .default-color1.chart-series-area-fill { -fx-fill: #fffacd55; } .default-color2.chart-series-area-fill { -fx-fill: #d8bfd855; }
chart-area-symbol
CSSクラスは、特定のデータ系列のグラフ凡例内の記号のパラメータを定義します。例33-8では、グラフの凡例の円の内側と外側の色を設定しています。
chart-series-area-line
CSSクラスは、面グラフの線のパラメータを設定します。この例では、線描画の色です。chart-series-area-fill
CSSクラスは、面の色と不透明度レベルを定義します。
これらのスタイルは、例33-9に示すように、Scene
クラスのgetStylesheets()
メソッドを使用してAreaChartSample
アプリケーションに適用されます。
このアプリケーションをコンパイルして実行すると、図33-8に示すように、変更された面グラフの外観が生成されます。
JavaFXアプリケーションでのCSSスタイルの使用の詳細は、「CSSによるチャートのスタイル設定」を参照してください。
関連APIドキュメント