【JavaFX】折れ線グラフを作成・表示する方法(LineChart)

JavaFXで折れ線グラフを作成・表示する方法について記載します。

1. 折れ線グラフを作成・表示する方法(X・Y軸とも数値データ)

折れ線グラフを作成するには、LineChartクラスを使用します。

実行例

1. 軸の定義

数値データを使用する場合は、NumberAxisクラス のインスタンスを作成します。

2. LineChartクラスの生成

LineChartクラスのインスタンス生成時に、X・Y軸のインスタンスをコンストラクタの引数に渡します。

また、今回はX・Y軸ともに数値なのでジェネリクスは、<Number,Number> と指定しています。

3. グラフに表示するデータ

表示するデータは、系列データごとに、XYChart.Seriesクラスのインスタンスを作成して追加します。

2. 折れ線グラフを作成・表示する方法(X軸:文字、Y軸:数値)

次の例では、X軸に文字データ、Y軸に数値データを設定する折れ線グラフを作成・表示します。

実行例

1. 軸の定義

X軸は文字データなので、CategoryAxisクラスのインスタンスを、Y軸は数値データを使用するので、NumberAxisクラスのインスタンスを生成して軸を定義します。

2. LineChartクラスの生成

LineChartクラスのインスタンス生成時に、X・Y軸のインスタンスをコンストラクタの引数に渡します。

また、今回はX軸は文字、Y軸は数値なのでジェネリクスは、<String,Number> と指定しています。

3. グラフに表示するデータ

表示するデータは、系列データごとに、XYChart.Seriesクラスのインスタンスを作成して追加します。

3. その他

1. X軸・Y軸の位置を変更する方法

X軸の位置の初期値はBottom、Y軸の位置の初期値はLeftになっています。
次の例では、X軸の位置をTop、Y軸の位置をRight に変更しています。

実行例

軸の位置を変更するには、setSideメソッドの引数に軸の位置を指定します。

2. グラフの線の色を変える方法

線の色を変更するには、ノードを指定してCSSを使って変更します。

実行例

Platform.runLater の処理で系列ごとにグラフの線の色を変更します。

3. グラフの値をツールチップに表示する方法

グラフにマウスポインタを当てたタイミングで、ツールチップに値を表示します。

実行例

各データのツールチップを表示するには、系列ごとの各データに、OnMouseEntered、 OnMouseExited イベントを登録します。

4. グラフ一覧

棒グラフを作成・表示する方法

積み上げ棒グラフを作成・表示する方法

折れ線グラフを作成・表示する方法

円グラフを作成・表示する方法

散布図を作成・表示する方法

面グラフを作成・表示する方法

バブルチャートを作成・表示する方法

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする