JavaFXで面グラフを作成・表示する方法について記載します。
目次
1. 面グラフを作成・表示する方法
面グラフを作成するには、AreaChartクラスを使用します。
実行例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
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 SampleAreaChart1 extends Application { @Override public void start(Stage pStage) { // X軸を定義（目盛の最小値、目盛の最大値、目盛の間隔） NumberAxis xAxis = new NumberAxis(1,5,1); xAxis.setLabel("X軸のラベル"); // Y軸を定義（目盛の最小値、目盛の最大値、目盛の間隔） NumberAxis yAxis = new NumberAxis(0 ,100, 20); yAxis.setLabel("Y軸のラベル"); // 面グラフのインスタンスを作成 AreaChart<Number,Number> areaChart = new AreaChart<>(xAxis,yAxis); areaChart.setTitle("AreaChart Title"); // 面グラフにデータを登録 XYChart.Series<Number,Number> series1 = new XYChart.Series<>(); series1.setName("2010"); series1.getData().add(new XYChart.Data(01, 10)); series1.getData().add(new XYChart.Data(02, 30)); series1.getData().add(new XYChart.Data(03, 50)); series1.getData().add(new XYChart.Data(04, 50)); series1.getData().add(new XYChart.Data(05, 30)); XYChart.Series<Number,Number> series2 = new XYChart.Series<>(); series2.setName("2011"); series2.getData().add(new XYChart.Data(01, 30)); series2.getData().add(new XYChart.Data(02, 50)); series2.getData().add(new XYChart.Data(03, 70)); series2.getData().add(new XYChart.Data(04, 90)); series2.getData().add(new XYChart.Data(05, 80)); XYChart.Series<Number,Number> series3 = new XYChart.Series<>(); series3.setName("2012"); series3.getData().add(new XYChart.Data(01, 20)); series3.getData().add(new XYChart.Data(02, 20)); series3.getData().add(new XYChart.Data(03, 20)); series3.getData().add(new XYChart.Data(04, 20)); series3.getData().add(new XYChart.Data(05, 30)); // グラフにデータを追加 Scene scene = new Scene(areaChart,400,300); areaChart.getData().addAll(series1, series2, series3); pStage.setTitle("Sample AreaChart"); pStage.setScene(scene); pStage.show(); } public static void main(String[] args){ Application.launch(args); } } |
1. 軸の定義
X軸・Y軸に数値データを使用するので、NumberAxisクラスを使用して軸を定義します。
|
1 2 3 4 5 6 7 |
// X軸を定義（目盛の最小値、目盛の最大値、目盛の間隔） NumberAxis xAxis = new NumberAxis(1,5,1); xAxis.setLabel("X軸のラベル"); // Y軸を定義（目盛の最小値、目盛の最大値、目盛の間隔） NumberAxis yAxis = new NumberAxis(0 ,100, 20); yAxis.setLabel("Y軸のラベル"); |
2. AreaChartクラスの生成
AreaChartクラスのインスタンス生成時に、X・Y軸のインスタンスをコンストラクタの引数に渡します。
また、X・Y軸は数値データなのでジェネリクスは、<Number,Number> と指定しています。
|
1 |
AreaChart<Number,Number> areaChart = new AreaChart<>(xAxis,yAxis); |
3. グラフに表示するデータ
表示するデータは、系列データごとに、XYChart.Seriesクラスのインスタンスを作成して追加します。
|
1 2 |
XYChart.Series<Number,Number> series1 = new XYChart.Series<>(); series1.getData().add(new XYChart.Data(01, 10)); |
2. グラフの色を変更する方法
グラフの色を変更するには、系列ごとに変更後の色をCSSで指定します。
実行例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
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 SampleAreaChart2 extends Application { @Override public void start(Stage pStage) { // X軸を定義（目盛の最小値、目盛の最大値、目盛の間隔） NumberAxis xAxis = new NumberAxis(1,5,1); xAxis.setLabel("X軸のラベル"); // Y軸を定義（目盛の最小値、目盛の最大値、目盛の間隔） NumberAxis yAxis = new NumberAxis(0 ,100, 20); yAxis.setLabel("Y軸のラベル"); // 面グラフのインスタンスを作成 AreaChart<Number,Number> areaChart = new AreaChart<>(xAxis,yAxis); areaChart.setTitle("AreaChart Title"); // 面グラフにデータを登録 XYChart.Series<Number,Number> series1 = new XYChart.Series<>(); series1.setName("2010"); series1.getData().add(new XYChart.Data(01, 10)); series1.getData().add(new XYChart.Data(02, 30)); series1.getData().add(new XYChart.Data(03, 50)); series1.getData().add(new XYChart.Data(04, 50)); series1.getData().add(new XYChart.Data(05, 30)); XYChart.Series<Number,Number> series2 = new XYChart.Series<>(); series2.setName("2011"); series2.getData().add(new XYChart.Data(01, 30)); series2.getData().add(new XYChart.Data(02, 50)); series2.getData().add(new XYChart.Data(03, 70)); series2.getData().add(new XYChart.Data(04, 90)); series2.getData().add(new XYChart.Data(05, 80)); XYChart.Series<Number,Number> series3 = new XYChart.Series<>(); series3.setName("2012"); series3.getData().add(new XYChart.Data(01, 20)); series3.getData().add(new XYChart.Data(02, 20)); series3.getData().add(new XYChart.Data(03, 20)); series3.getData().add(new XYChart.Data(04, 20)); series3.getData().add(new XYChart.Data(05, 30)); // グラフにデータを追加 Scene scene = new Scene(areaChart,400,300); areaChart.getData().addAll(series1, series2, series3); pStage.setTitle("Sample AreaChart"); pStage.setScene(scene); pStage.show(); // 系列ごとに色を変更 areaChart.lookupAll(".default-color0.chart-area-symbol").forEach(n -> n.setStyle( "-fx-background-color: #FFA500, white;")); areaChart.lookupAll(".default-color0.chart-series-area-line").forEach(n -> n.setStyle( "-fx-stroke: #FFA500;")); areaChart.lookupAll(".default-color0.chart-series-area-fill").forEach(n -> n.setStyle( "-fx-fill: #FFA50050;")); areaChart.lookupAll(".default-color1.chart-area-symbol").forEach(n -> n.setStyle( "-fx-background-color: #90EE90, white;")); areaChart.lookupAll(".default-color1.chart-series-area-line").forEach(n -> n.setStyle( "-fx-stroke: #90EE90;")); areaChart.lookupAll(".default-color1.chart-series-area-fill").forEach(n -> n.setStyle( "-fx-fill: #90EE9050;")); areaChart.lookupAll(".default-color2.chart-area-symbol").forEach(n -> n.setStyle( "-fx-background-color: #87CEFA, white;")); areaChart.lookupAll(".default-color2.chart-series-area-line").forEach(n -> n.setStyle( "-fx-stroke: #87CEFA;")); areaChart.lookupAll(".default-color2.chart-series-area-fill").forEach(n -> n.setStyle( "-fx-fill: #87CEFA50;")); } public static void main(String[] args){ Application.launch(args); } } |