ご意見をお寄せください | 印刷 | PDF | ePub | Mobi

JavaFX: JavaFX UIコンポーネントの操作

32 折れ線グラフ

この章では、直線で結ばれた一連のポイントとしてデータを表示する2軸チャートのタイプである、折れ線グラフについて説明します。

折れ線グラフはほとんどの場合、一定の期間にわたるデータの変遷を示すときに使用されます。図32-1に、データの系列が3つある一般的な折れ線グラフを示します。

図32-1 折れ線グラフの例

「図32-1 折れ線グラフの例」の説明

各2軸チャートには、2つの軸、データ・ポイントの描画、および凡例があります。また、グラフのタイトルを指定することもできます。

グラフの設定

グラフごとに、タイトル、およびグラフに対するその位置を指定できます。タイトルは、グラフの上下左右に配置できます。同様に、グラフの凡例の位置を指定できます。

2軸チャートの場合、チャート描画の外観、およびデータ値に対応するグラフ記号をレンダリングするグラフ領域を管理できます。代替列と代替行の他に、横グリッド線と縦グリッド線、およびゼロ線を設定できます。

次の設定を定義することにより、各グラフのデフォルトの外観を変更できます。

軸ラベル
チャート描画に対する軸の位置
軸範囲の上限と下限
最大ティック・マークと最小ティック・マーク、ティック単位、ティック・マーク間のギャップ、およびティック・ラベル

また、軸とその範囲に対する変更をアニメーション化するよう指定したり、軸の範囲をデータから自動的に決定できるようにすることもできます。

グラフ・データ

2軸チャートのスーパー・クラスであるXYChartクラスには、面グラフ、折れ線グラフ、棒グラフ、散布図およびバブル・チャートをビルドするための基本機能が用意されています。 XYChart.Dataクラスを使用して、これらのタイプのグラフのデータ・モデルを指定します。 xValueプロパティは、X軸上に描画するグラフ要素の値を定義し、yValueプロパティは、Y軸の値を定義します。グラフ要素ごとに追加の値を設定することもできます。この値は、グラフに必要な任意の方法で描画できます。また、この値を使用して、チャート要素に関する追加情報を格納することもできます。たとえば、これを使用して、バブル・チャートの半径を定義できます。

2軸チャートの場合、XYChart.Seriesクラスを使用してデータの複数の系列を定義できます。また、各系列に特定の名前を割り当てて、グラフの凡例を表示することもできます。

折れ線グラフの作成

折れ線グラフを作成するには、最低限、2つの軸を定義し、LineChartクラスをインスタンス化してLineChartオブジェクトを作成し、XYChart.Seriesクラスを使用してデータの系列を1つ以上作成し、データをグラフに割り当てる必要があります。例32-1では、これらのタスクを実装しています。

例32-1 簡単な折れ線グラフ

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;
 
 
public class LineChartSample extends Application {
 
    @Override public void start(Stage stage) {
        stage.setTitle("Line Chart Sample");
        //defining the axes
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Number of Month");
        //creating the chart
        final LineChart<Number,Number> lineChart = 
                new LineChart<Number,Number>(xAxis,yAxis);
                
        lineChart.setTitle("Stock Monitoring, 2010");
        //defining a series
        XYChart.Series series = new XYChart.Series();
        series.setName("My portfolio");
        //populating the series with data
        series.getData().add(new XYChart.Data(1, 23));
        series.getData().add(new XYChart.Data(2, 14));
        series.getData().add(new XYChart.Data(3, 15));
        series.getData().add(new XYChart.Data(4, 24));
        series.getData().add(new XYChart.Data(5, 34));
        series.getData().add(new XYChart.Data(6, 36));
        series.getData().add(new XYChart.Data(7, 22));
        series.getData().add(new XYChart.Data(8, 45));
        series.getData().add(new XYChart.Data(9, 43));
        series.getData().add(new XYChart.Data(10, 17));
        series.getData().add(new XYChart.Data(11, 29));
        series.getData().add(new XYChart.Data(12, 25));
        
        Scene scene  = new Scene(lineChart,800,600);
        lineChart.getData().add(series);
       
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

この例では、AxisクラスのサブクラスであるNumberAxisクラスを使用して縦軸と横軸の両方を作成することにより、数値を表しています。 X軸とY軸の両方を数値であると宣言したため、データの系列の作成時にはXYChart.DataオブジェクトにNumberパラメータを指定する必要があります。 XYChart.Dataオブジェクトの最初のパラメータは横軸の値を定義しており、XYChart.Dataオブジェクトの2番目のパラメータは縦軸の値を定義しています。

このアプリケーションをコンパイルして実行した結果を図32-2に示します。

図32-2 データの系列が1つある折れ線グラフ

「図32-2 データの系列が1つある折れ線グラフ」の説明

図32-2に示す折れ線グラフでは、グラフ上の各データ項目を強調表示するために記号を使用しています。折れ線グラフ上で特定のデータ値ではなく傾向を表示するには、例32-2に示すように、グラフの記号を無効にします。

例32-2 折れ線グラフの記号の無効化

lineChart.setCreateSymbols(false);

図32-1に、傾向グラフのサンプルを示します。

図32-1では、各軸はチャート描画に対するデフォルトの位置に表示されています。ただし、setSideメソッドを適用することにより、チャート描画の反対側に軸を表示できます。例32-3は、横軸をチャート描画の上に移動する方法を示しています。

例32-3 軸の位置の指定

xAxis.setSide(Side.TOP);

折れ線グラフのカテゴリの作成

NumberAxisクラスのかわりにCategoryAxisクラスを使用して、折れ線グラフ内で数値以外のデータをレンダリングします。

例32-4に示す変更されたアプリケーションのコードを確認してください。ここでは、CategoryAxisクラスをインスタンス化して横軸を作成しています。 X軸タイプの変更に対応するためにLineChartオブジェクトの宣言が変更されています。

例32-4 カテゴリ軸を使用した月の表示

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;
 
 
public class LineChartSample extends Application {
 
    @Override public void start(Stage stage) {
        stage.setTitle("Line Chart Sample");
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Month");       
        
        final LineChart<String,Number> lineChart = 
                new LineChart<String,Number>(xAxis,yAxis);
                
        lineChart.setTitle("Stock Monitoring, 2010");
                                
        XYChart.Series series = new XYChart.Series();
        series.setName("My portfolio");
        
        series.getData().add(new XYChart.Data("Jan", 23));
        series.getData().add(new XYChart.Data("Feb", 14));
        series.getData().add(new XYChart.Data("Mar", 15));
        series.getData().add(new XYChart.Data("Apr", 24));
        series.getData().add(new XYChart.Data("May", 34));
        series.getData().add(new XYChart.Data("Jun", 36));
        series.getData().add(new XYChart.Data("Jul", 22));
        series.getData().add(new XYChart.Data("Aug", 45));
        series.getData().add(new XYChart.Data("Sep", 43));
        series.getData().add(new XYChart.Data("Oct", 17));
        series.getData().add(new XYChart.Data("Nov", 29));
        series.getData().add(new XYChart.Data("Dec", 25));
        
        
        Scene scene  = new Scene(lineChart,800,600);
        lineChart.getData().add(series);
       
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

XYChartDataオブジェクトには、月の名前および対応する値が含まれています。これに応じて横軸のラベルが変更されています。

変更したアプリケーションのコードをコンパイルして実行した結果を図32-3に示します。

図32-3 横カテゴリ軸

「図32-3 横カテゴリ軸」の説明

多くの場合、折れ線グラフを使用して、異なるデータ・セットを同じ期間にわたって分析できます。このタスクをアプリケーションで実装するには、XYChart.Dataオブジェクトの複数の系列を使用します。

折れ線グラフへの系列の追加

例32-5は、データの系列が3つある「Stock Monitoring」アプリケーションのソース・コードを示します。前の例の例32-4で使用されている系列に加えて、新しい系列が2つ宣言されています。

系列は、getDataおよびaddAllメソッドの連続コールを使用してグラフに割り当てられています。

例32-5 Stock Monitoringサンプルへの2つの系列の追加

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;
 
 
public class LineChartSample extends Application {
 
    @Override public void start(Stage stage) {
        stage.setTitle("Line Chart Sample");
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
         xAxis.setLabel("Month");
        final LineChart<String,Number> lineChart = 
                new LineChart<String,Number>(xAxis,yAxis);
       
        lineChart.setTitle("Stock Monitoring, 2010");
                          
        XYChart.Series series1 = new XYChart.Series();
        series1.setName("Portfolio 1");
        
        series1.getData().add(new XYChart.Data("Jan", 23));
        series1.getData().add(new XYChart.Data("Feb", 14));
        series1.getData().add(new XYChart.Data("Mar", 15));
        series1.getData().add(new XYChart.Data("Apr", 24));
        series1.getData().add(new XYChart.Data("May", 34));
        series1.getData().add(new XYChart.Data("Jun", 36));
        series1.getData().add(new XYChart.Data("Jul", 22));
        series1.getData().add(new XYChart.Data("Aug", 45));
        series1.getData().add(new XYChart.Data("Sep", 43));
        series1.getData().add(new XYChart.Data("Oct", 17));
        series1.getData().add(new XYChart.Data("Nov", 29));
        series1.getData().add(new XYChart.Data("Dec", 25));
        
        XYChart.Series series2 = new XYChart.Series();
        series2.setName("Portfolio 2");
        series2.getData().add(new XYChart.Data("Jan", 33));
        series2.getData().add(new XYChart.Data("Feb", 34));
        series2.getData().add(new XYChart.Data("Mar", 25));
        series2.getData().add(new XYChart.Data("Apr", 44));
        series2.getData().add(new XYChart.Data("May", 39));
        series2.getData().add(new XYChart.Data("Jun", 16));
        series2.getData().add(new XYChart.Data("Jul", 55));
        series2.getData().add(new XYChart.Data("Aug", 54));
        series2.getData().add(new XYChart.Data("Sep", 48));
        series2.getData().add(new XYChart.Data("Oct", 27));
        series2.getData().add(new XYChart.Data("Nov", 37));
        series2.getData().add(new XYChart.Data("Dec", 29));
        
        XYChart.Series series3 = new XYChart.Series();
        series3.setName("Portfolio 3");
        series3.getData().add(new XYChart.Data("Jan", 44));
        series3.getData().add(new XYChart.Data("Feb", 35));
        series3.getData().add(new XYChart.Data("Mar", 36));
        series3.getData().add(new XYChart.Data("Apr", 33));
        series3.getData().add(new XYChart.Data("May", 31));
        series3.getData().add(new XYChart.Data("Jun", 26));
        series3.getData().add(new XYChart.Data("Jul", 22));
        series3.getData().add(new XYChart.Data("Aug", 25));
        series3.getData().add(new XYChart.Data("Sep", 43));
        series3.getData().add(new XYChart.Data("Oct", 44));
        series3.getData().add(new XYChart.Data("Nov", 45));
        series3.getData().add(new XYChart.Data("Dec", 44));
        
        Scene scene  = new Scene(lineChart,800,600);       
        lineChart.getData().addAll(series1, series2, series3);
       
        stage.setScene(scene);
        stage.show();
    }
 
 
    public static void main(String[] args) {
        launch(args);
    }
}

データの各系列には、setNameメソッドを使用して定義された一意の名前があります。

このアプリケーションをコンパイルして実行した結果を図32-4に示します。

図32-4 データの系列が3つあるStock Monitoringの例

「図32-4 データの系列が3つあるStock Monitoringの例」の説明

addAllメソッド内で宣言された対応する系列の順序によって各線に異なる色が定義されていることに注意してください。この順序をlineChart.getData().addAll(series3, series1, series2)のように変更し、アプリケーションをコンパイルして実行します。図32-5に、変更した出力を示します。

図32-5 順序を変更した折れ線グラフの系列

「図32-5 順序を変更した折れ線グラフの系列」の説明

JavaFX: JavaFX UIコンポーネントの操作

展開 | 縮小

前のページページの先頭次のページ

32 折れ線グラフ

グラフの設定

グラフ・データ

折れ線グラフの作成

折れ線グラフのカテゴリの作成

折れ線グラフへの系列の追加

目次

JavaFX: JavaFX UIコンポーネントの操作