如何在散点图中更改点大小?

问题描述

我用JavaFX制作了这个ScatterChart:如何设置数据点大小?

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

我发现应该在CSS中完成，但即使文档，我仍然无法弄清楚.

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

推荐答案

使用

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

如果您需要将此代码仅应用于特定的图表，请为图表提供一个ID，并在CSS文件中使用该ID:

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

和CSS

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

这篇关于如何在散点图中更改点大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！