38 CSSによるチャートのスタイル設定
この章では、カスケード・スタイル・シート(CSS)を適用することによってJavaFXチャートのデフォルトの外観を変更する方法について説明します。チャートの色スキームの変更、凡例または軸の変更、およびチャート記号の変更の方法について学習します。
JavaFXチャートのビジュアル要素はすべて、modenaスタイル・シートによって定義されます。JavaFX APIには、これらのビジュアル要素を変更するために限定された一連のメソッドとプロパティが用意されています。JavaFXアプリケーション内のチャートに別のルック・アンド・フィールを実装するためにチャートの代替のCSSプロパティを使用することをお薦めします。
チャート固有のプロパティの完全なリストは、JavaFX CSSリファレンス・ガイドにあります。CSSスタイルをチャートに適用する場合、実装の詳細は、「CSSによるJavaFXアプリケーションのスキニング」を参照してください。
基本チャート要素の変更
すべてのJavaFXチャートには、.chart
、.chart-content
、.chart-title
および.chart-legend
CSSクラスを介して設定できる一般的なプロパティがあります。図38-1に、対応するチャートの領域を示します。
次の要素のビジュアル特性を変更および設定できます。
-
パディングとインセット
-
背景色とイメージ
-
フォント
-
テキストの塗りつぶしの色
デフォルトでは、チャートには5ピクセルのパディングがあり、そのコンテンツには10ピクセルのパディングがあります。これらの値は、例38-1に示すように、.chart
および.chart-content
CSSクラスの-fx-padding
プロパティを使用して変更できます。
図38-2に、これらのスタイルを適用した後の折れ線グラフのビューを示します。
チャートの背景色または背景イメージを定義できます。例38-2に示すように、-fx-background-image
プロパティを追加します。
例38-2 背景イメージの設定
.chart {
-fx-padding: 10px;
-fx-background-image: url("icon.png");
}
.chart-content {
-fx-padding: 30px;
}
アイコンの方が折れ線グラフより小さいため、残りの領域を埋めるためにこのイメージが繰り返されます。図38-3に、背景イメージが適用された場合の折れ線グラフを示します。
図38-3に示す折れ線グラフのグラフ凡例には、デフォルトのルック・アンド・フィールが適用されています。例38-3に示すように、.chart-legend
CSSクラスに定義されているプロパティを変更することにより、その外観を変更できます。
例38-3 グラフの凡例の設定
.chart { -fx-padding: 10px; -fx-background-image: url("icon.png"); } .chart-content { -fx-padding: 30px; } .chart-legend { -fx-background-color: transparent; -fx-padding: 20px; } .chart-legend-item-symbol{ -fx-background-radius: 0; } .chart-legend-item{ -fx-text-fill: #191970; }
これらのスタイルを適用すると、図38-4に示すように、透明な背景を使用してグラフ凡例がレンダリングされ、ラベルがダーク・ブルーで塗られ、凡例記号が四角形になります。
デフォルトでは、凡例記号は円のように見えます。なぜなら、これらは、高さ5ピクセル、幅5ピクセルおよび半径5ピクセルの丸い四角形として宣言されるからです。半径を明示的に0に設定すると、円は四角形になります。また、-fx-shape
プロパティを使用して凡例記号を定義することもできます。たとえば、-fx-shape: "M5,0 L10,8 L0,8 Z"
とすると、SVGパスを指定して三角形が作成されます。
チャート・テキスト要素を変更するには、例38-4に示すように、対応するスタイルを使用する必要があります。.chart-title
クラスは、チャート・タイトルの塗りつぶしの色とフォント・サイズを設定します。.axis-label
クラスは、軸ラベルの塗りつぶしの色を定義します。
例38-4 テキスト要素の色の変更
.chart { -fx-padding: 10px; -fx-background-image: url("icon.png"); } .chart-content { -fx-padding: 30px; } .chart-title { -fx-text-fill: #4682b4; -fx-font-size: 1.6em; } .axis-label { -fx-text-fill: #4682b4; } .chart-legend { -fx-background-color: transparent; -fx-padding: 20px; } .chart-legend-item-symbol{ -fx-background-radius: 0; } .chart-legend-item{ -fx-text-fill: #191970; }
これらの変更の結果、図38-5に示す外観になります。
チャート描画の色の変更
チャートのデフォルトの背景色を変更したり、チャートの背景としてイメージを設定しても、変更はグラフ自体には影響しません。modenaスタイル・シートで指定されているとおり、2軸チャートのチャート描画の背景はライト・グレーであり、代替行はグレーです。チャート描画の背景を設定するには、.chart-plot-background
クラスの-fx-background-color
および-fx-background-image
プロパティを使用します。例38-5では、チャート描画の背景色、代替行の塗りつぶしの色、および縦と横のグリッド線の色を定義しています。
例38-5 チャート描画の背景色の設定
.chart { -fx-padding: 10px; -fx-background-image: url("icon.png"); } .chart-content { -fx-padding: 30px; } .chart-title { -fx-text-fill: #4682b4; -fx-font-size: 1.6em; } .axis-label { -fx-text-fill: #4682b4; } .chart-legend { -fx-background-color: transparent; -fx-padding: 20px; } .chart-legend-item-symbol{ -fx-background-radius: 0; } .chart-legend-item{ -fx-text-fill: #191970; } .chart-plot-background { -fx-background-color: #e2ecfe; } .chart-vertical-grid-lines { -fx-stroke: #3278fa; } .chart-horizontal-grid-lines { -fx-stroke: #3278fa; } .chart-alternative-row-fill { -fx-fill: #99bcfd; -fx-stroke: transparent; -fx-stroke-width: 0; }
図38-6に、描画の背景が変更された折れ線グラフを示します。
描画の背景が他のチャート領域と同じになるようにチャートを設計する場合、例38-6に示すように、描画および代替行用として透明の背景を設定します。
例38-6 チャート描画の透明な背景の設定
.chart { -fx-padding: 10px; -fx-background-image: url("icon.png"); } .chart-content { -fx-padding: 30px; } .chart-title { -fx-text-fill: #4682b4; -fx-font-size: 1.6em; } .axis-label { -fx-text-fill: #4682b4; } .chart-legend { -fx-background-color: transparent; -fx-padding: 20px; } .chart-legend-item-symbol{ -fx-background-radius: 0; } .chart-legend-item{ -fx-text-fill: #191970; } .chart-plot-background { -fx-background-color: transparent; } .chart-vertical-grid-lines { -fx-stroke: #3278fa; } .chart-horizontal-grid-lines { -fx-stroke: #3278fa; } .chart-alternative-row-fill { -fx-fill: transparent; -fx-stroke: transparent; -fx-stroke-width: 0; }
JavaFXアプリケーションのチャートにsetAlternativeRowFillVisible(false)
メソッドを適用することにより、代替行を非表示にすることができます。
透明な背景色が適用されると、チャートは図38-7に示すようになります。
軸の設定
Axis
クラスにはティック・マークとラベルを設定するためのメソッドおよびプロパティが用意されていますが、対応するCSSクラスおよびプロパティを使用してこれらのチャート要素の外観を定義できます。
「バブル・チャート」の章で説明されているバブル・チャートのサンプルについて考えてみます。次の行を削除またはコメント・アウトすることにより、例34-4のティックのラベルの色セットを無効にします。
-
xAxis.setTickLabelFill(Color.CHOCOLATE);
-
yAxis.setTickLabelFill(Color.CHOCOLATE)
;
例38-7に示すコード・フラグメントをアプリケーションのCSSファイルに追加します。
例38-7 チャートの軸のスタイルの定義
.axis { -fx-font-size: 1.4em; -fx-tick-label-fill: #914800; -fx-font-family: Tahoma; -fx-tick-length: 20; -fx-minor-tick-length: 10; } .axis-label { -fx-text-fill: #462300; }
このスタイル・シートでは、軸ラベルとティックのラベルの相対的なフォント・サイズ、フォント・ファミリおよび塗りつぶしの色を定義しています。また、ティック・マークと副ティック・マークの長さも設定しています。これらのスタイルをチャートに適用すると、図38-8のようになります。
例38-7では、ティック・マークと副ティック・マークの長さのデフォルト値を変更しています。例38-8に示すように、新しい色スキームを定義することにより、外観を変更し続けることができます。この例では、基本ティック・マークの幅を3ピクセルに設定し、これらが副ティック・マークより太く見えるようにしています。
例38-8 ティック・マークと副ティック・マークの色の変更
.axis { -fx-font-size: 1.4em; -fx-tick-label-fill: #914800; -fx-font-family: Tahoma; -fx-tick-length: 20; -fx-minor-tick-length: 10; } .axis-label { -fx-text-fill: #462300; } .axis-tick-mark { -fx-stroke: #637040; -fx-stroke-width: 3; } .axis-minor-tick-mark { -fx-stroke: #859656; }
図38-9に、チャートのティック・マークの色と幅を変更したときに軸がどのように変更されるかを示します。
チャート色の設定
チャートのデフォルトの色を変更することにより、JavaFXアプリケーションに独自のスタイルを簡単に設定できます。この項では、チャートの基本タイプに別の色を設定する作業のいくつかの側面について説明します。
デフォルトでは、modenaスタイル・シートで、最初の8つのデータ系列に対応する線の色が8色定義されます。折れ線グラフに追加されたデータ系列の数が8を超える場合、追加の線の色は.chart-series-line
CSSクラスに定義されます。
線のスタイルを変更するには、.chart-series-line
クラスと.default-color<x>.chart-series-line
クラスを使用します。例38-9に定義されているスタイルでは、3つのデータ系列の線に新しい色を設定し、デフォルトの効果を削除し、2ピクセルの幅を指定しています。
例38-9 折れ線グラフの3つの系列の代替色の設定
.chart-series-line { -fx-stroke-width: 2px; -fx-effect: null; } .default-color0.chart-series-line { -fx-stroke: #e9967a; } .default-color1.chart-series-line { -fx-stroke: #f0e68c; } .default-color2.chart-series-line { -fx-stroke: #dda0dd; }
図38-10に、このスタイルを適用した後の折れ線グラフを示します。
凡例にはまだチャート系列のデフォルトの色が表示されていることに注意してください。これは、対応する変更がチャート記号には適用されなかったからです。例38-10に、凡例内の系列の色を変更する方法を示します。
例38-10 チャート記号の色の変更
.chart-series-line { -fx-stroke-width: 2px; -fx-effect: null; } .default-color0.chart-series-line { -fx-stroke: #e9967a; } .default-color1.chart-series-line { -fx-stroke: #f0e68c; } .default-color2.chart-series-line { -fx-stroke: #dda0dd; } .default-color0.chart-line-symbol { -fx-background-color: #e9967a, white; } .default-color1.chart-line-symbol { -fx-background-color: #f0e68c, white; } .default-color2.chart-line-symbol { -fx-background-color: #dda0dd, white; }
図38-10と図38-11を比較し、グラフ凡例の変更を確認してください。
面グラフの色を変更する場合は、各データ系列の面、対応する境界線、およびチャート記号という3つのグラフィカル・コンポーネントについて検討してください。デフォルトでは、modenaスタイル・シートにより、面、線および記号を含む8つのデータ系列の色スキームが定義されます。また、デフォルトのスタイルにより、追加系列の面、線および記号の基本色も設定されます。
例38-11に、3つのデータ系列に対応する面のデフォルトの色スキームを変更する方法を示します。
例38-11 面グラフの新しい色スキームの作成
.default-color0.chart-area-symbol { -fx-background-color: #e9967a, #ffa07a; } .default-color1.chart-area-symbol { -fx-background-color: #f0e68c, #fffacd; } .default-color2.chart-area-symbol { -fx-background-color: #dda0dd, #d8bfd8; } .default-color0.chart-series-area-line { -fx-stroke: #e9967a; } .default-color1.chart-series-area-line { -fx-stroke: #f0e68c; } .default-color2.chart-series-area-line { -fx-stroke: #dda0dd; } .default-color0.chart-series-area-fill { -fx-fill: #ffa07aaa} .default-color1.chart-series-area-fill { -fx-fill: #fffacd77; } .default-color2.chart-series-area-fill { -fx-fill: #d8bfd833; }
太字の値に注意してください。これらの太字の文字により、面の不透明度の新しい値が設定されます。デフォルトでは、すべての面の不透明度レベルは0.17です。例38-11では、最初の面の不透明度レベルが最も大きく、3番目の面の不透明度レベルが最も小さくなるように、これらの面に不透明度を再度割り当てています。アルファベットを使用した16進数の色構文は標準のW3C CSSフォーマットではないことに注意してください。W3C要件に準拠するには、4番目のパラメータをアルファベット値としてrgba
CSS関数を使用します。図38-12に、これらのスタイルを適用したときにチャートの外観がどのように変化するかを示します。
例38-12に、modenaスタイル・シートに定義されている棒グラフの棒すべての基本スタイルを示します。このスタイルにより、背景色に線形グラデーションが作成され、すべての棒の端が丸く見えるように半径が設定されます。
例38-12 棒グラフのデフォルトのスタイル
.chart-bar { -fx-bar-fill: #22bad9; -fx-background-color: linear (0%,0%) to (0%,100%) stops (0%, derive(-fx-bar-fill,-30%)) (100%, derive(-fx-bar-fill,-40%)), linear (0%,0%) to (0%,100%) stops (0%, derive(-fx-bar-fill,80%)) (100%, derive(-fx-bar-fill, 0%)), linear (0%,0%) to (0%,100%) stops (0%, derive(-fx-bar-fill,30%)) (100%, derive(-fx-bar-fill,-10%)); -fx-background-insets: 0,1,2; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; }
背景設定は色、グラデーションおよび効果に限定されません。データの系列ごとに背景イメージを設定することもできます。このアプローチを実装するには、例38-13に示すように、最初にBarChartSampleアプリケーションを簡略化します。
例38-13 簡略化された棒グラフのサンプル
package barchartsample; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.chart.BarChart; import javafx.scene.chart.CategoryAxis; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart; import javafx.stage.Stage; public class BarChartSample extends Application { final static String austria = "Austria"; final static String brazil = "Brazil"; final static String france = "France"; final static String italy = "Italy"; final static String usa = "USA"; @Override public void start(Stage stage) { stage.setTitle("Bar Chart Sample"); final CategoryAxis xAxis = new CategoryAxis(); final NumberAxis yAxis = new NumberAxis(); final BarChart<String, Number> bc = new BarChart<String, Number>(xAxis, yAxis); bc.setTitle("Country Summary"); xAxis.setLabel("Country"); xAxis.setTickLabelRotation(90); yAxis.setLabel("Value"); XYChart.Series series1 = new XYChart.Series(); series1.setName("2003"); series1.getData().add(new XYChart.Data(austria, 25601.34)); series1.getData().add(new XYChart.Data(brazil, 20148.82)); series1.getData().add(new XYChart.Data(france, 10000)); series1.getData().add(new XYChart.Data(italy, 35407.15)); series1.getData().add(new XYChart.Data(usa, 11000)); Scene scene = new Scene(bc, 400, 600); bc.getData().add(series1); bc.setLegendVisible(false); stage.setScene(scene); scene.getStylesheets().add("barchartsample/Chart.css"); stage.show(); } public static void main(String[] args) { launch(args); } }
ここで、例38-14に示すように、チャートのスタイル・シートを定義します。
例38-14 棒の背景へのイメージの追加
.chart-bar { -fx-background-color: rgba(0,168,355,0.05); -fx-border-color: rgba(0,168,355,0.3) rgba(0,168,355,0.3) transparent rgba(0,168,355,0.3); -fx-background-radius: 0; -fx-background-position: left center; } .data0.chart-bar { -fx-background-image: url("austria.png"); } .data1.chart-bar { -fx-background-image: url("brazil.png"); } .data2.chart-bar { -fx-background-image: url("france.png"); } .data3.chart-bar { -fx-background-image: url("italy.png"); } .data4.chart-bar { -fx-background-image: url("usa.png"); }
このスタイルにより、データの系列ごとに背景色が設定され、棒内のイメージの位置が定義されます。図38-13に、新しいスタイルを適用した後にBarChartSampleがどのようになるかを示します。
JavaFXアプリケーションで円グラフをビルドする場合は通常、円グラフのスライス用の代替色を設定する必要があります。.default-color<x>.chart-pie
CSSクラスを設定することにより、デフォルトの色スキームを再定義できます。例38-15では、このタスクを実装しています。
例38-15 円グラフの色の設定
.default-color0.chart-pie { -fx-pie-color: #ffd700; } .default-color1.chart-pie { -fx-pie-color: #ffa500; } .default-color2.chart-pie { -fx-pie-color: #860061; } .default-color3.chart-pie { -fx-pie-color: #adff2f; } .default-color4.chart-pie { -fx-pie-color: #ff5700; } .chart-pie-label-line { -fx-stroke: #8b4513; -fx-fill: #8b4513; } .chart-pie-label { -fx-fill: #8b4513; -fx-font-size: 1em; } .chart-legend { -fx-background-color: #fafad2; -fx-stroke: #daa520; }
これで、円グラフの色は、果物が表す色と似たものになります。また、例38-15のスタイル・シートでは、ラベルとグラフ凡例に別の色を設定しています。新しいスタイルは図38-14で確認できます。
チャート記号の変更
グラフ凡例内に表示する記号はmodenaスタイル・シートに定義されていますが、デフォルトの色スキームと記号の形状を変更することにより、これらの外観を変更できます。例38-11では、面グラフの記号の色を変更しています。.chart-area-symbol{-fx-background-radius: 0;}
の行を追加することにより、記号の形状を四角形に変更できます。デフォルトでは、背景の半径は5ピクセルです。背景の半径を0に変更すると、円が四角形に変わります。この変更は、図38-15に示すように、データの系列すべてに適用されます。
散布図の場合、すべてのデータが一連のポイントによって表されます。データ系列ごとに特別な記号があります。デフォルトでは、modenaスタイルにより、7つのデータ系列用の7つの記号と、他のデータ系列に使用される基本記号が定義されます。例38-16に、散布図のデフォルトのスタイルを示します。
例38-16 modenaスタイル・シートに定義されている散布図のスタイル
.chart-symbol { /* solid circle */ -fx-background-color: CHART_COLOR_1; -fx-background-radius: 5px; -fx-padding: 5px; } .default-color1.chart-symbol { /* solid square */ -fx-background-color: CHART_COLOR_2; -fx-background-radius: 0; } .default-color2.chart-symbol { /* solid diamond */ -fx-background-color: CHART_COLOR_3; -fx-background-radius: 0; -fx-padding: 7px 5px 7px 5px; -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z"; } .default-color3.chart-symbol { /* cross */ -fx-background-color: CHART_COLOR_4; -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-color4.chart-symbol { /* solid triangle */ -fx-background-color: CHART_COLOR_5; -fx-background-radius: 0; -fx-background-insets: 0; -fx-shape: "M5,0 L10,8 L0,8 Z"; } .default-color5.chart-symbol { /* hollow circle */ -fx-background-color: CHART_COLOR_6, white; -fx-background-insets: 0, 2; -fx-background-radius: 5px; -fx-padding: 5px; } .default-color6.chart-symbol { /* hollow square */ -fx-background-color: CHART_COLOR_7, white; -fx-background-insets: 0, 2; -fx-background-radius: 0; } .default-color7.chart-symbol { /* hollow diamond */ -fx-background-color: CHART_COLOR_8, white; -fx-background-radius: 0; -fx-background-insets: 0, 2.5; -fx-padding: 7px 5px 7px 5px; -fx-shape: "M5,0 L10,9 L5,18 L0,9 Z"; }
これらのCSSクラスおよび使用可能なCSSプロパティを使用して散布図の記号を変更することも、独自の記号を作成してデータを表すこともできます。
例38-17に示すように、.default-color1.chart-symbol
CSSクラスを使用して、2番目のデータ系列の記号のデフォルトの色と形状を変更します。
例38-17 2番目のデータ系列の形状の再定義
.default-color1.chart-symbol { -fx-background-color: #a9e200; -fx-shape: "M0,4 L2,4 L4,8 L7,0 L9,0 L4,11 Z"; }
このスタイルを散布図に適用すると、図38-16に示すように、2番目の系列のポイントがチェック・マークとして表示されます。他の系列のポイントはデフォルトのスタイルに応じて表示されます。
例38-18に示すように、.chart-symbol
を使用して、散布図内のすべてのデータ系列に新しいチャート記号を設定します。
図38-17に、7つのデータ系列がある散布図を示します。各系列は異なる色のチェック・マークで表されています。各系列の色はmodenaスタイル・シートから導出されています。
最後に、JavaFXアプリケーションでチャートのスタイルを設定する必要がある場合は、次の手順を検討してください。
-
JavaFXアプリケーションに.cssファイルを追加します。
-
変更する必要があるチャートのグラフィカル要素を識別します。
-
対応するCSSクラスを確認します。
-
値を指定して選択済のCSSクラスのプロパティを設定し、必要な外観を実現します。
CSSを使用してJavaFXアプリケーションのスタイルを設定する方法の詳細は、「CSSによるUIコントロールのスタイル設定」を参照してください。