2015-06-21

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 
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
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 
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
.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

投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)