系列1つの棒グラフを描画するサンプル

13680 ワード
JavaFX Java Java テキストリンク

JavaFXで棒グラフを描画したいと思い、調べた結果、以下のURLにたどりつきました。
https://docs.oracle.com/javase/jp/8/javafx/user-interface-tutorial/bar-chart.htm
しかし、系列3つのサンプルでした。なので系列1つのサンプルを作ってみました。

以下、段階を追って説明します。

棒グラフの縦、横

棒グラフを描画するにはBarChartクラスを使います。ジェネリックスにはNumberとStringの組み合わせを書くのが基本のようです。NumberとString順序ははグラフを縦にするか、横にするかによって、変わります。また、合わせてコンストラクタの引数の順序を変えます。

横
BarChart<Number, String> bc = new BarChart<>(new NumberAxis(), new CategoryAxis());
縦
BarChart<String, Number> bc = new BarChart<>(new CategoryAxis(), new NumberAxis());

以下、横の棒グラフを作成することにします。

データなし棒グラフ

データを何も持たない状態の棒グラフを描画します。BarChartのインスタンスを生成して、 Sceneクラスのコンストラクタに指定します。

データなし棒グラフ
package test;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.stage.Stage;

public class BarChartDefault extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        // 棒グラフを生成
        BarChart<Number, String> bc = new BarChart<>(new NumberAxis(), new CategoryAxis());

        Scene scene  = new Scene(bc, 400, 400);

        primaryStage.setTitle("棒グラフ");
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }

}

以下のように軸だけが描画されます。

データあり棒グラフ

例として、以下のグラフを描画します。学校のクラスの人数の表です。

クラス名 人数
A 20
B 10
C 30
データなし棒グラフ
package test;

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.stage.Stage;

public class BarChartAddData extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {

        // 系列を生成
        Series<Number, String> series = new Series<Number, String>();
        series.setName("人数");
        ObservableList<Data<Number, String>> list = series.getData();
        list.add(new XYChart.Data<>(20, "A"));
        list.add(new XYChart.Data<>(10, "B"));
        list.add(new XYChart.Data<>(30, "C"));

        // 棒グラフを生成
        BarChart<Number, String> bc = new BarChart<>(new NumberAxis(), new CategoryAxis());
        bc.getData().add(series);

        Scene scene  = new Scene(bc, 400, 400);

        primaryStage.setTitle("棒グラフ");
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }

}

以下のようにグラフが描画されます。

categoryGapメソッド

上記のグラフは縦に太いです。画面の大きさとデータの区分の数から自動で調節されるようです。BarChartクラスにはcategoryGapというプロパティあり、異なるカテゴリのバーの間に残す間隔の値です。値を出力させた結果、10.0でした。なので、50くらうに設定してみます。setCategoryGapメソッドが用意されてますので、以下の一行を追加します。

categoryGapの設定
bc.setCategoryGap(50);

以下のように、グラフが細くなりました。

getBarGapメソッド

よく見ると、ラベルの上下中央の位置とグラフがずれています。これはbarGapという値で変化します。値を出力させた結果4.0でした。なので0にします。以下の一行を追加します。

barGapの設定
bc.setBarGap(0);

これでグラフの位置が揃いました。

JavaScript配列ソート
白駿2407号:組み合わせ