How to change point size in Scatter Chart?

问题

I have this ScatterChart made in JavaFX: How can I set the data points size?

I found that it should be done in CSS, but even having the docs, I still cannot figure it out.

回答1:

Use

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

If you need this to apply just to a specific chart, give the chart an id and use the id in the CSS file:

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

If you want smaller points, this doesn't seem to work well (I assume because they are not compatible with the default node generated for the chart data). In this case you might need to set the node for the data as well:

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

and the CSS

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

回答2:

If you want to increase the size of all points, you can simply use following CSS:

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

By the way, this is an example from 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;
}

It makes a fifth series symbol a hollow circle. Please see the relation between .default-color<x> in this stylesheet and CSS Reference Guide mentioned below - it's really easy.

More detailed info can be found at JavaFX CSS Reference Guide in Scatter Chart section.

来源：https://stackoverflow.com/questions/39947456/how-to-change-point-size-in-scatter-chart