散布図のポイントサイズを変更する方法は？

Question

私はこれを持っていますScatterChart made in JavaFX： どのようにデータポイントのサイズを設定できますか？

私はそれがCSSで行う必要があることがわかりましたが、docsを持っていても、それはまだ分かりません。

Answer 1

使用

.chart-symbol { 
    -fx-background-radius: 10px ; 
    -fx-padding: 10px ; 
} 

あなたは、これは、単に特定のチャートに適用され、チャートにIDを与えるとCSSファイルでIDを使用する必要がある場合：

chart.setId("bifurcation-diagram"); 

#bifurcation-diagram .chart-symbol { 
    -fx-background-radius: 10px ; 
    -fx-padding: 10px ; 
} 

SSCCE：

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.ScatterChart; 
import javafx.scene.chart.XYChart.Data; 
import javafx.scene.chart.XYChart.Series; 
import javafx.stage.Stage; 

public class ScatterChartExample extends Application { 

    @Override 
    public void start(Stage primaryStage) { 

     ScatterChart<Number, Number> chart = new ScatterChart<>(new NumberAxis(), new NumberAxis()); 

     chart.setId("bifurcation-diagram"); 

     Series<Number, Number> series = new Series<>(); 
     chart.getData().add(series); 

     for (int i = 0 ; i <= 100; i++) { 
      double lambda = 4.0 * i/100 ; 
      double x = 0.5 ; 
      for (int j = 0 ; j < 100 ; j++) { 
       x = lambda * x * (1-x); 
      } 
      for (int j = 0 ; j < 50; j++) { 
       series.getData().add(new Data<>(lambda, x)); 
       x = lambda * x * (1-x); 
      } 
     } 

     Scene scene = new Scene(chart, 1200, 800); 
     scene.getStylesheets().add("bifurcation.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 

    } 

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

bifurcation.css：

#bifurcation-diagram .chart-symbol { 
    -fx-background-radius: 10px ; 
    -fx-padding: 10px ; 
} 

あなたは小さなポイントをしたい場合は、これは（彼らは、チャートデータの生成されたデフォルトのノードとの互換性はありませんので、私は仮定）うまく動作するようには思えません。この場合、あなたにもデータのノードを設定する必要があるかもしれません：

for (int i = 0 ; i <= 400; i++) { 
    double lambda = 1.0 * i/100 ; 
    double x = 0.5 ; 
    for (int j = 0 ; j < 100 ; j++) { 
     x = lambda * x * (1-x); 
    } 
    for (int j = 0 ; j < 50; j++) { 
     Data<Number, Number> data = new Data<>(lambda, x); 
     Region plotpoint = new Region(); 
     plotpoint.setShape(new Circle(0.5)); 
     data.setNode(plotpoint); 
     series.getData().add(data); 
     x = lambda * x * (1-x); 
    } 
} 

とCSS

#bifurcation-diagram .chart-symbol { 
    -fx-background-radius: 0; 
    -fx-padding: 1px ; 
} 

Answer 2

あなたはすべてのポイントのサイズを大きくしたい場合は、単に以下のCSSを使用することができます：ところで

.chart-symbol { 
    -fx-padding: 10px; 
} 

を、これはJavaFX: Working with JavaFX UI Components (scatter chart section)からの例です：

.default-color5.chart-symbol { 
    -fx-background-color: #860061, white; 
    -fx-background-insets: 0, 2; 
    -fx-background-radius: 5px; 
    -fx-padding: 5px; 
} 

それはAになり第5シリーズは中空円を表す。このスタイルシートの.default-color<x>と下記のCSSリファレンスガイドの関係をご覧ください。本当に簡単です。

さらに詳しい情報は、JavaFX CSS Reference Guideの散布図のセクションにあります。