JavaFX のチャートを使いこなせるようになりたいと、今まで三回にわたって LineChart のサンプルを紹介しました。今回は BarChart を利用した棒グラフのサンプルを紹介します。
動作環境は次の通りです。
- OS: Fedora 22 x86_64
- jdk1.8.0_45-1.8.0_45-fcs.x86_64 (Oracle)
- IDE: NetBeans IDE 8.0.2
リスト：BarChartSample.java
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 | package barchartsample;import javafx.application.Application;import static javafx.application.Application.launch;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.stage.Stage;public class BarChartSample extends Application { final static String fy2010 = "2010"; final static String fy2011 = "2011"; final static String fy2012 = "2012"; final static String fy2013 = "2013"; final static String fy2014 = "2014"; @Override public void start(Stage stage) { final CategoryAxis xAxis = new CategoryAxis(); final NumberAxis yAxis = new NumberAxis(); final BarChart<String, Number> barchart = new BarChart<>(xAxis, yAxis); barchart.setTitle("棒グラフのサンプル"); xAxis.setLabel("会計年度"); yAxis.setLabel("販売金額（百万円）"); XYChart.Series series1 = new XYChart.Series(); series1.setName("製品Ａ"); series1.getData().add(new XYChart.Data(fy2010, 11)); series1.getData().add(new XYChart.Data(fy2011, 15)); series1.getData().add(new XYChart.Data(fy2012, 21)); series1.getData().add(new XYChart.Data(fy2013, 38)); series1.getData().add(new XYChart.Data(fy2014, 62)); XYChart.Series series2 = new XYChart.Series(); series2.setName("製品Ｂ"); series2.getData().add(new XYChart.Data(fy2010, 38)); series2.getData().add(new XYChart.Data(fy2011, 35)); series2.getData().add(new XYChart.Data(fy2012, 36)); series2.getData().add(new XYChart.Data(fy2013, 41)); series2.getData().add(new XYChart.Data(fy2014, 42)); XYChart.Series series3 = new XYChart.Series(); series3.setName("製品Ｃ"); series3.getData().add(new XYChart.Data(fy2010, 15)); series3.getData().add(new XYChart.Data(fy2011, 28)); series3.getData().add(new XYChart.Data(fy2012, 38)); series3.getData().add(new XYChart.Data(fy2013, 42)); series3.getData().add(new XYChart.Data(fy2014, 34)); Scene scene = new Scene(barchart, 600, 400); scene.getStylesheets().add(getClass().getResource("BarChart.css").toExternalForm()); barchart.getData().addAll(series1, series2, series3); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); }} |
CSS は、折れ線グラフに使ったものをベースにしています。
リスト：BarChart.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 | .chart { -fx-padding: 10px; -fx-background-color: white;}.chart-content { -fx-padding: 10px; }.chart-title { -fx-font-size: 18pt; }.axis-label { -fx-font-size: 14pt;}.axis { -fx-tick-label-font: 12pt system;}.chart-bar { -fx-border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) transparent rgba(0, 0, 0, 0.2);}.series0.chart-bar { -fx-background-color: lightskyblue;}.series1.chart-bar { -fx-background-color: khaki;}.series2.chart-bar { -fx-background-color: lightpink;}.chart-legend { -fx-font-size: 12pt; -fx-background-color: transparent; -fx-padding: 10px;}.default-color0.chart-legend-item-symbol { -fx-border-color: rgba(0, 0, 0, 0.2); }.default-color1.chart-legend-item-symbol { -fx-border-color: rgba(0, 0, 0, 0.2); }.default-color2.chart-legend-item-symbol { -fx-border-color: rgba(0, 0, 0, 0.2); } |
実行例を以下に示します。
棒グラフを作成するときにいつも頭を悩ますのがバーの配色です。三原色に近い色を使ってしまうと、ペイントする領域が多いのでバーが目立ち過ぎて、却って棒グラフの特徴が判りにくくなってしまいます。かと言って淡い配色を使うと、バーの輪郭を処理しないとメリハリが無いグラフになってしまいます。その点、JavaFX のチャートでは容易に輪郭を表現できそうです。
なお、 BarChart クラスを StackedBarChart へ変更すると、下記のような積み上げの棒グラフを作成できます。
参考サイト
- JavaFX CSS Reference Guide
- Using JavaFX Charts: Styling Charts with CSS | JavaFX 2 Tutorials and Documentation
0 件のコメント:
コメントを投稿