Как изменить размер точки в диаграмме рассеяния?

Question

У меня есть этот ScatterChart, сделанный в JavaFX: Как установить размер точек данных?

Я нашел, что это должно быть сделано в CSS, но даже имея docs, я все еще не могу понять.

Answer 1

Использование

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

Если вам это нужно применять только к конкретной схеме, дают диаграмму идентификатор и использовать идентификатор в файле CSS:

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

Это делает пятый символ серии - полый круг. См. Связь между .default-color<x> в этой таблице стилей и Справочнике по CSS, упомянутом ниже - это очень просто.

Более подробную информацию можно найти на странице JavaFX CSS Reference Guide в разделе «Диаграмма рассеяния».