LineChartを置く

とりあえずLineChartを置く。
題材はてきとーに、月別のチーム人数を出すグラフと言うことで。

<LineChart fx:id="testLineChart" layoutX="-11.0" layoutY="21.0" prefHeight="464.0" prefWidth="578.0" title="月別チーム人数">
                    <xAxis>
                      <CategoryAxis label="Month" side="BOTTOM" />
                    </xAxis>
                    <yAxis>
                      <NumberAxis side="LEFT" />
                    </yAxis>
                  </LineChart>

Paneやら何やらの設定は略
大事なのはxAxisとyAxisで、それぞれ横軸と縦軸の事。以下の二つが設定できる。

NumberAxis → 名前の通り数値軸(0, 10, 20...のような軸)
CategoryAxis → 文字列軸(1月、2月...のような軸)

今回は縦軸が人数、横軸が月でどっちもNumberAxisで良いが、
面白くないので横軸は「x月」としてCategoryAxisにした。

データを設定する

このまま画面表示すると空っぽのグラフが出ますが、空っぽの時点でグラフでもないのでデータを設定。

データもべたで設定は面白くないので、以下のてきとーなカンマ区切りテキストファイル(chartData.txt)から読み込み。

01月,10
02月,20
03月,5
04月,9
05月,45
06月,21
07月,9
08月,65
09月,0
10月,11
11月,2
12月,8

今回はControllerクラスのInitializeで設定。
LineChartの折れ線1本分はXYChart.Seriesクラスで表すので作成。

public void initialize(URL location, ResourceBundle resources) {
        XYChart.Series<String, Number> series = new XYChart.Series<String, Number>();
        series.setName("人数");     // 凡例の名前

凡例はExcelでお馴染みのあれ。

で、ファイルからデータを取って設定。
データを取る部分は本題ではないので、forEachとsplitでざくっと。

        try (Stream<String> chartStream = Files.lines(Paths.get("chartData.txt"), StandardCharsets.UTF_8)) {

            // 各要素をカンマで区切り、XYChartに設定。設定したXYChartをseriesに追加する。
            chartStream.forEach(s -> {
                String[] splitResult = s.split(",");

                Data<String, Number> xyChart
                    = new XYChart.Data<String, Number>(splitResult[0], Integer.parseInt(splitResult[1]));

                series.getData().add(xyChart);
            });

        } catch (IOException e) {
            e.printStackTrace();
        }

        // Data設定されたSeriesをLineChartに追加する。
        testLineChart.getData().add(series);

本題が分かりづらいですが、大事なのは以下だけ。
折れ線中のデータ部分はXYChartで表す。

Data<String, Number> xyChart = new XYChart.Data<String, Number>(splitResult[0], Integer.parseInt(splitResult[1]));

series.getData().add(xyChart);
testLineChart.getData().add(series);

SeriesのgetData()で取れるObservableListにXYChartを設定してあげれば良い。
最後にLineChartに同じようにSeriesを設定する。

↓こんな感じのグラフに。0のデータの○がはみ出るのはどうにかできるのかな。
また特に指定してないけど、縦軸・横軸の最大は勝手に設定される。

マウス位置のデータ値を表示する

もうちょっと機能が欲しいので、
マウスをあわせたら、その位置のデータ値が出るようにしてみる。

調べた感じ、以下のように単純にマウスイベント設定では駄目

// LineChartそのものにMouseMoved設定
testLineChart.setOnMouseMoved(ev ->{/* ～～～ */});

LineChartは軸の部分や凡例の部分も含まれるので、
チャート部分のマウス位置がちゃんと取れないらしい。

なので以下のようにlookupでチャート背景部分のNodeを取れば良い。

Node chartBackground = testLineChart.lookup(".chart-plot-background");

マウス位置のデータ値は、各AxisのgetValueForDisplayメソッドで取得できるので、イベントはこんな感じ。
(dataLabelはただのLabelです)

        chartBackground.setOnMouseMoved(ev -> {
            String pointXAxis = testLineChart.getXAxis().getValueForDisplay(ev.getX());
            Number pointYAxis = testLineChart.getYAxis().getValueForDisplay(ev.getY());
            String dataLabelText = String.format("xAxis:%s, yAxis:%.2f", pointXAxis, pointYAxis);

            dataLabel.setText(dataLabelText);
        });

ついでにチャート部分でのマウスカーソルが矢印だとかっこ悪いので、
クロスヘアに変えてみた。

        chartBackground.setCursor(Cursor.CROSSHAIR);

やったぜ。

setMouseTransparent

実はこのままだと、折れ線上や○の部分でデータ値が出なかった。マウスカーソルも戻っちゃう。
それもそのはずで、折れ線の部分は.chart-plot-backgroundでは無いのでイベントが適用されない。

全部のスタイルに適用するのも大変なので、以下のようにして
LineChart上の.chart-plot-background以外の要素にsetMouseTransparent(true)してあげると良いみたい？

chartBackground.getParent().getChildrenUnmodifiable().stream().filter(
        n -> n != chartBackground).forEach(
                n -> n.setMouseTransparent(true));

testLineChart.getChildren～でも良さそうだけど。
この設定をしてやると、そのNodeのマウスイベントは無効になって、その下のNodeのイベントが呼ばれるようになる。

とりあえずやりたいことは出来たので満足。