javafx-2 - JavaFX XYChart.Seriesに特定の色を設定するにはどうすればよいですか？

Question

JavaFX折れ線グラフのスタイルを設定しようとしていますが、特定のシリーズに色を設定する方法が見つかりません。CSSを介してスタイルを設定できることは知っていますが、シリーズにIDまたはCLASSを設定する方法が見つかりません。

誰かが私に手がかりを与えることができますか？

1. ラインチャートに色を設定するにはどうすればよいですか？
2. cssクラスをシリーズに設定するにはどうすればよいですか？

Answer 1

一般に、チャートのスタイルを設定するための好ましい方法は、コードを使用せず、jschoenが推奨するcssスタイルシートのみを使用することです。さらに、さらにカスタマイズが必要な場合は、コードからのcssルックアップを使用して、系列データから生成されたノードを掘り下げ、さまざまな追加のcssスタイルを適用できます。

これは、 JavaFX折れ線グラフのスタイルを動的に変更する方法と、その答えに合わせたサンプルプログラムに関する情報です。サンプルアプリでは、追加のcssスタイリングはすべて、コードからのsetStyle呼び出しを介して行われます。同様のルックアップ手法を使用すると、一連のノードにアクセスして、setStyle呼び出しではなく適切なスタイルシートスタイルクラスを適用できます。

Answer 2

ラインチャートに色を設定するにはどうすればよいですか？

AreaChartまたはLineChartへの簡単な方法は次のとおりです

XYChart chart = new AreaChart();
Series series = new Series();
chart.getData().add(series);

Node fill = series.getNode().lookup(".chart-series-area-fill"); // only for AreaChart
Node line = series.getNode().lookup(".chart-series-area-line");

Color color = Color.RED; // or any other color

String rgb = String.format("%d, %d, %d",
        (int) (color.getRed() * 255),
        (int) (color.getGreen() * 255),
        (int) (color.getBlue() * 255));

fill.setStyle("-fx-fill: rgba(" + rgb + ", 0.15);");
line.setStyle("-fx-stroke: rgba(" + rgb + ", 1.0);");

Answer 3

CSSを使用したスタイリングチャートに関するこのOracleドキュメントを見つけました。そのページSetting Chart Colorsで、具体的に探しているものまで下にスクロールします。

ラインチャートに色を設定するにはどうすればよいですか？

このための最も簡単な方法は、次のCSSスニペットです。

.default-color0.chart-series-line { -fx-stroke: #e9967a; }
.default-color1.chart-series-line { -fx-stroke: #f0e68c; }
.default-color2.chart-series-line { -fx-stroke: #dda0dd; }

残念ながら、これはidまたはどのシリーズでは機能せず、むしろシリーズがグラフに配置される順序で機能します。次の方法で線のスタイルを設定することもできます。

.chart-series-line {    
    -fx-stroke-width: 2px;
    -fx-effect: null;
}

cssクラスをシリーズに設定するにはどうすればよいですか？

残念ながら、それを行う方法がわかりません。XYChart.Series nameプロパティに基づいてCSSルールを作成できると便利ですが、それは不可能だと思います。

Answer 4

jewelseaの答えは、シリーズのすべてのノードにスタイルクラスを配置する必要があると述べているようです。次のコードを使用して、面グラフのシリーズのスタイルを設定し、シリーズに関連付けられたノードにのみクラスを割り当てています。

サンプルコードはScalaにありますが、簡単に翻訳できるはずです。

シリーズを作成するときに、シリーズ固有のスタイルクラスを追加します。

 val s = new XYChart.Series[Number, Number]() //create a new series
   s.setName(seriesName)                      //set its name (display in legend)
   s.getNode.getStyleClass.add("series-" + seriesName) //add specific style class

次に、CSSファイル内で、シリーズの塗りつぶしの色を変更するために次の操作を行いますbutterwings。

.series-butterwings *.chart-series-area-fill{
    -fx-fill: #aab597; 
}

これは、シリーズエリアのノードがシリーズノード（面グラフの場合はグループ）の下にあるため、機能します。

Answer 5

getNode（）をコードのどこかに配置すると、NullPointerExceptionが発生する可能性があるため、XYChartのlayoutPlotChildren（）抽象メソッド（AreaChart、BarChart、BubbleChart、LineChart、ScatterChart、StackedAreaChart、StackedBarChart）をオーバーライドします。CSSスタイルシートを使用せずに線と形状を変更する最小限のグラフの例：

public class MyChart extends LineChart {

Series s1;

public MyChart() {
    this(new NumberAxis(), new NumberAxis());
    this.getXAxis().setLabel("X");
    this.getYAxis().setLabel("Y");
}

public MyChart(Axis axis, Axis axis1) {
    super(axis, axis1);
    s1 = new XYChart.Series();
    getData().add(s1);
}

public void adddata() {
    s1.setName("Demo");
    s1.getData().add(new XYChart.Data(0, 1));
    s1.getData().add(new XYChart.Data(1, 2));        
    s1.getData().add(new XYChart.Data(2, 0));
    s1.getData().add(new XYChart.Data(3, 1));
}

// Override the abstract class
public void layoutPlotChildren() {
    // call super so you don't have to do all the work
    super.layoutPlotChildren();
    // not really necessary check
    if (s1 != null && s1.getNode() != null) {
        //(optional) get all the possible CSS styles you can change
        List<String> styles = s1.getNode().getStyleClass();
        //get the line from the series
        Node line = s1.getNode().lookup(".chart-series-line");
        //set some styles
        line.setStyle("-fx-stroke: black; -fx-stroke-width: 1px; -fx-effect: null; -fx-stroke-dash-array: 10 10 10 10;");
        //change the shapes
        for (Object data : s1.getData()) {
            if (data != null) {
                //only display the last data point, change the style same way as shown with the line
                if (s1.getData().indexOf(data) != s1.getData().size()-1) {
                    StackPane stackPane = (StackPane) ((XYChart.Data) data).getNode();
                    stackPane.setVisible(false);
                }
            }
        }
    }

}

}

そしてそれを開始するための実行コード：

public class RunJavaFX extends Application {

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

@Override
public void start(Stage primaryStage) throws Exception {
    MyChart chart = new MyChart();
    chart.adddata();
    Scene scene = new Scene(chart);
    primaryStage.setScene(scene);
    primaryStage.show();
}

}