JavaFX: ScatterChart を使いこなそう

JavaFX のチャートを使いこなせるようになりたいと、いくつかチャートのサンプルを紹介してきました。今回は ScatterChart を利用した散布図のサンプルを紹介します。

動作環境は次の通りです。

• OS: Fedora 22 x86_64
• jdk1.8.0_45-1.8.0_45-fcs.x86_64 (Oracle)
• IDE: NetBeans IDE 8.0.2

今回は [3] を参考にして、マウスのポインタをデータ上に持っていけば Tooltip でデータ点の座標を表示できるようにしました。

リスト：ScatterChartSample.java 

package scatterchartsample;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.control.Tooltip;
import javafx.stage.Stage;

public class ScatterChartSample extends Application {

    @Override
    public void start(Stage stage) {
        stage.setTitle("Scatter Chart Sample");

        //defining the axes
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Ｘ軸ラベル（数値）");
        yAxis.setLabel("Ｙ軸ラベル（数値）");

        //creating the chart
        final ScatterChart scatterChart = new ScatterChart(xAxis, yAxis);
        ObservableList<XYChart.Series<Double, Double>> scatterData = getScatterData();
        scatterChart.setData(scatterData);
        scatterChart.setTitle("散布図のサンプル");

        Scene scene = new Scene(scatterChart, 600, 400);
        scene.getStylesheets().add(getClass().getResource("ScatterChart.css").toExternalForm());

        stage.setScene(scene);
        stage.show();

        scatterData.stream().forEach((series) -> {
            series.getData().stream().forEach((point) -> {
                Tooltip.install(point.getNode(),
                        new Tooltip(String.format("(%3.2f, %3.2f)", point.getXValue(), point.getYValue())));
            });
        });
    }

    /**
     *
     * @return ObservableList<XYChart.Series<Double, Double>>
     */
    private ObservableList<XYChart.Series<Double, Double>> getScatterData() {
        Series<Double, Double> series1 = new Series<>();
        Series<Double, Double> series2 = new Series<>();

        series1.setName("系列１");
        series2.setName("系列２");

        for (int i = 0; i < 50; i++) {
            series1.getData().add(new XYChart.Data(Math.random() * 2 - 1.4, Math.random() - .7));
            series2.getData().add(new XYChart.Data(Math.random() * 2 - .6, Math.random() - .3));
        }

        ObservableList<XYChart.Series<Double, Double>> seriesList = FXCollections.observableArrayList();
        seriesList.addAll(series1, series2);

        return seriesList;
    }

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

CSS は、今回も折れ線グラフに使ったものをベースにしています。

リスト：ScatterChart.css 

.chart {
    -fx-padding: 10px;
    -fx-background-color: white;
}

.chart-content {
    -fx-padding: 10px;    
}

.chart-title {
    -fx-font-size: 18pt;    
}


.chart-legend {
    -fx-font-size: 12pt;    
    -fx-background-color:  transparent;
    -fx-padding: 10px;
}

.axis-label {
    -fx-font-size: 14pt;
}

.axis {
    -fx-tick-label-font: 12pt system;
}

.chart-symbol { /* solid circle */
    -fx-background-radius: 3px;
    -fx-padding: 3px;
}

.default-color0.chart-symbol {
    -fx-background-color: black, forestgreen;
}

.default-color1.chart-symbol {
    -fx-background-color: tomato;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M2,0 L5,4 L8,0 L10,0 L10,2 L6,5 L10,8 L10,10 L8,10 L5,6 L2,
        10 L0,10 L0,8 L4,5 L0,2 L0,0 Z";
}

実行例を以下に示します。

散布図は自分にとって最も基本的なグラフです。データを表現する際にまず、XY グラフ（散布図）を作ってみて、それからデータを結ぶとか補間するなど、データに視覚的な意味付けをしていきます。ですので、ScatterChart を出発点として、線やら何やら加えていけるととても嬉しいのですが、JavaFX のチャートはそのような仕様にはなっていません。しかし、基本的なチャートが利用できるわけですから、これらのクラスを拡張して自分の好きなチャートを作れるようにすれば良いのです。

さて、言うは易く行うは難し…、習得に時間が掛りそうではあります。

参考サイト

1. JavaFX CSS Reference Guide
2. Using JavaFX Charts: Styling Charts with CSS | JavaFX 2 Tutorials and Documentation
3. Tooltips for datapoints in a scatter chart in javafx 2.2 - Stack Overflow