JavaFX: LineChart を使いこなそう (3)

JavaFX では LineChart で折れ線グラフ、ScatterChart で散布図を作成することができます。それでは、データのポイントと直線や曲線が混在するグラフを作成するにはどうすれば良いでしょうか？

この場合、LineChart でデータとデータの間の線の色を透明にしてデータ点を表現します。

今回は、最小二乗法のサンプルグラフを紹介します。と言っても、回帰計算の処理はサンプルには含まれておらず、計算結果のみをプロットしています。

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

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

※ コンパイル時の警告が出ないようにソースコードを修正、整理しました。(2016-3-26)

リスト：LineChartSample2.java 

package linechartsample2;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class LineChartSample2 extends Application {

    @Override
    public void start(Stage stage) {
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Ｘ軸ラベル（時間）");
        yAxis.setLabel("Ｙ軸ラベル（数値）");

        LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);
        lineChart.setTitle("最小二乗法のサンプル");
        lineChart.setAnimated(false);
        lineChart.setCreateSymbols(true);

        XYChart.Series<Number, Number> series1 = new XYChart.Series<>();
        series1.setName("データ");
        series1.getData().add(new XYChart.Data<>(1, 3));
        series1.getData().add(new XYChart.Data<>(2, 7));
        series1.getData().add(new XYChart.Data<>(3, 14));
        series1.getData().add(new XYChart.Data<>(4, 10));
        series1.getData().add(new XYChart.Data<>(5, 17));
        lineChart.getData().add(series1);

        XYChart.Series<Number, Number> series2 = new XYChart.Series<>();
        series2.setName("回帰直線");
        series2.getData().add(new XYChart.Data<>(0, 0.9));
        series2.getData().add(new XYChart.Data<>(6, 19.5));
        lineChart.getData().add(series2);

        Scene scene = new Scene(lineChart, 600, 400);
        scene.getStylesheets().add(getClass().getResource("XYChart.css").toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

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

CSS は以下のようになります。凡例において、回帰直線の青い直線を表現するのに手こずってしまいました。

リスト：XYChart.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-series-line {
    -fx-stroke-width: 1px;
    -fx-effect: null;
}

.default-color0.chart-series-line { -fx-stroke: transparent; }
.default-color1.chart-series-line { -fx-stroke: blue; }

.default-color0.chart-line-symbol { 
    -fx-background-color: red;
    -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";
}

.default-color1.chart-line-symbol { 
    -fx-background-color: transparent, transparent; 
}

.default-color1.chart-legend-item-symbol{
    -fx-background-color: blue;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-shape: "M0,5 L0,7 L12,7 L12,5 Z";
    -fx-scale-shape: false;
}

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

次回は、他の種類のチャートを紹介する予定です。

参考サイト

1. bitWalk's: トレンドチャートのサンプル