JavaFX: BarChart を使いこなそう

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 

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 

.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 へ変更すると、下記のような積み上げの棒グラフを作成できます。

参考サイト

1. JavaFX CSS Reference Guide
2. Using JavaFX Charts: Styling Charts with CSS | JavaFX 2 Tutorials and Documentation