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

JavaFX のチャートを使いこなせるようになりたいと、前回 LineChart のベースサンプルを示しました。今回はそのサンプルを自分が好きなように CSS で修飾してみました。

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

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

Java のソースを若干の修正を加え、32 行で CSS を読み込んでいます。

リスト：LineChartSample.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

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.LineChart; 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         final LineChart lineChart = new LineChart(xAxis, yAxis);         lineChart.setData(getChartData());         lineChart.setTitle("折れ線グラフのサンプル");                   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, Double>> getChartData() {         double y1 = 0.1;         double y2 = -0.1;           Series<String, Double> series1 = new Series<>();         Series<String, Double> 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, Double>> seriesList = FXCollections.observableArrayList();         seriesList.addAll(series1, series2);           return seriesList;     }       public static void main(String[] args) {         launch(args);     } }

CSS は参考資料 [1][2] を参考にして作成しました。

リスト：LineChart.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 45 46

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

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

プレゼンテーションに使用するグラフは、離れた人から見ても識別できるように、ややオーバー気味にフォントの大きさや、シンボル、ラインの色を選ぶようにしています。しかし、絶対的基準というものはありませんので、ご参考程度に。

CSS でチャートの要素の修飾を指定する方法は理解できますが、いまひとつしっくりきません。慣れが必要だと思われます。自分が慣れるためにいろいろなサンプルを紹介していきたいと思います。

参考サイト

1. JavaFX CSS Reference Guide
2. Using JavaFX Charts: Styling Charts with CSS | JavaFX 2 Tutorials and Documentation