JavaFX のラインチャートを使っていると、チャート内に縦線あるいは横線の固定線を描画したい場合があります。例えば、目標値を強調する場合や、管理範囲を表示したい場合などです。参考サイト [1] にぴったりの例がありましたので紹介します。
動作環境は次の通りです。
- OS: Fedora 23 x86_64
- jdk1.8.0_74-1.8.0_74-fcs.x86_64 (Oracle)
- IDE: NetBeans IDE 8.1
まず、LineChartWithMarkers.java ですが、これは参考サイト [1] で紹介されている LineChart を継承した内部クラス LineChartWithMarkers を、通常のクラスにして、少しだけ書き換えたものです。
リスト：LineChartWithMarkers.java
package linechartsample;
import java.util.Objects;
import javafx.beans.InvalidationListener;
import javafx.beans.Observable;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.chart.Axis;
import javafx.scene.chart.LineChart;
import javafx.scene.shape.Line;
public class LineChartWithMarkers<X, Y> extends LineChart<X, Y> {
private final ObservableList<Data<X, Y>> horizontalMarkers;
private final ObservableList<Data<X, Y>> verticalMarkers;
public LineChartWithMarkers(Axis<X> xAxis, Axis<Y> yAxis) {
super(xAxis, yAxis);
horizontalMarkers = FXCollections.observableArrayList(data -> new Observable[]{data.YValueProperty()});
horizontalMarkers.addListener((InvalidationListener) observable -> layoutPlotChildren());
verticalMarkers = FXCollections.observableArrayList(data -> new Observable[]{data.XValueProperty()});
verticalMarkers.addListener((InvalidationListener) observable -> layoutPlotChildren());
}
public void addHorizontalValueMarker(Data<X, Y> marker) {
Objects.requireNonNull(marker, "the marker must not be null");
if (horizontalMarkers.contains(marker)) {
return;
}
Line line = new Line();
line.setStyle("-fx-stroke:green;-fx-stroke-width:1px;");
marker.setNode(line);
getPlotChildren().add(line);
horizontalMarkers.add(marker);
}
public void removeHorizontalValueMarker(Data<X, Y> marker) {
Objects.requireNonNull(marker, "the marker must not be null");
if (marker.getNode() != null) {
getPlotChildren().remove(marker.getNode());
marker.setNode(null);
}
horizontalMarkers.remove(marker);
}
public void addVerticalValueMarker(Data<X, Y> marker) {
Objects.requireNonNull(marker, "the marker must not be null");
if (verticalMarkers.contains(marker)) {
return;
}
Line line = new Line();
line.setStyle("-fx-stroke:orange;-fx-stroke-width:1px;");
marker.setNode(line);
getPlotChildren().add(line);
verticalMarkers.add(marker);
}
public void removeVerticalValueMarker(Data<X, Y> marker) {
Objects.requireNonNull(marker, "the marker must not be null");
if (marker.getNode() != null) {
getPlotChildren().remove(marker.getNode());
marker.setNode(null);
}
verticalMarkers.remove(marker);
}
@Override
protected void layoutPlotChildren() {
horizontalMarkers.stream().forEach((horizontalMarker) -> {
drawHorizontalMarker(horizontalMarker);
});
verticalMarkers.stream().forEach((verticalMarker) -> {
drawVerticalMarker(verticalMarker);
});
super.layoutPlotChildren();
}
private void drawHorizontalMarker(Data<X, Y> horizontalMarker) {
Line line = (Line) horizontalMarker.getNode();
line.setStartX(0);
line.setEndX(getBoundsInLocal().getWidth());
line.setStartY(getYAxis().getDisplayPosition(horizontalMarker.getYValue()) + 0.5); // 0.5 for crispness
line.setEndY(line.getStartY());
line.toFront();
}
private void drawVerticalMarker(Data<X, Y> verticalMarker) {
Line line = (Line) verticalMarker.getNode();
line.setStartX(getXAxis().getDisplayPosition(verticalMarker.getXValue()) + 0.5); // 0.5 for crispness
line.setEndX(line.getStartX());
line.setStartY(0d);
line.setEndY(getBoundsInLocal().getHeight());
line.toFront();
}
}
次に、サンプルチャートを描画する LineChartSample.java ですが、これは過去の記事 [2] をベースに、横線を前述の LineChartWithMarkers クラスの addHorizontalValueMarker メソッドで描画する機能を追加しています。なお、縦線を描画するには addVertialValueMarker メソッドを用います。
リスト：LineChartSample.java
package linechartsample;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.chart.XYChart.Series;
import javafx.stage.Stage;
public class LineChartSample extends Application {
@Override
public void start(Stage stage) {
stage.setTitle("Line Chart Sample");
//defining the axes
final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis();
xAxis.setLabel("Ｘ軸ラベル（年）");
yAxis.setLabel("Ｙ軸ラベル（数値）");
//creating the chart
LineChartWithMarkers<String, Number> lineChart = new LineChartWithMarkers<>(xAxis, yAxis);
lineChart.setData(getChartData());
lineChart.setTitle("折れ線グラフのサンプル");
lineChart.addHorizontalValueMarker(new XYChart.Data<>("", 1));
lineChart.addHorizontalValueMarker(new XYChart.Data<>("", -1));
Scene scene = new Scene(lineChart, 600, 400);
scene.getStylesheets().add(getClass().getResource("LineChart.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
/**
*
* @return ObservableList<XYChart.Series<String, Double>>
*/
private ObservableList<XYChart.Series<String, Number>> getChartData() {
double y1 = 0.5;
double y2 = -0.5;
Series<String, Number> series1 = new Series<>();
Series<String, Number> series2 = new Series<>();
series1.setName("系列１");
series2.setName("系列２");
for (int i = 2011; i < 2021; i++) {
series1.getData().add(new XYChart.Data<>(Integer.toString(i), y1));
y1 = y1 + Math.random() - .5;
series2.getData().add(new XYChart.Data<>(Integer.toString(i), y2));
y2 = y2 + Math.random() - .5;
}
ObservableList<XYChart.Series<String, Number>> seriesList = FXCollections.observableArrayList();
seriesList.add(series1);
seriesList.add(series2);
return seriesList;
}
public static void main(String[] args) {
launch(args);
}
}
LineChart.css は過去の記事 [2] と同じです。
リスト：LineChart.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: 2px;
-fx-effect: null;
}
.default-color0.chart-series-line { -fx-stroke: red; }
.default-color1.chart-series-line { -fx-stroke: blue; }
.default-color0.chart-line-symbol {
-fx-background-color: red, #f88;
-fx-background-radius: 6px;
-fx-padding: 6px;
}
.default-color1.chart-line-symbol {
-fx-background-color: blue, #88f;
-fx-background-radius: 0;
-fx-padding: 6px;
}
実行例を以下に示します。データは乱数でプロットされていますので、場合によっては横線 y = ± 1 が表示エリアに含まれない場合があります。
参考サイト
- java - How to add two vertical lines with JavaFX LineChart - Stack Overflow
- bitWalk's: JavaFX: LineChart を使いこなそう (2)