JavaFX 中的堆叠图表 [英] Stacking charts in JavaFX

问题描述

我在 JavaFX 中使用 BarChart 和 LineChart.当我将两个图表制作成相同大小并将它们放在同一个位置时，它们会完美地重叠在一起.我如何使 LineChart 出现在 BarChart 的顶部.

I'm using a BarChart and a LineChart in JavaFX. When I make the two charts the same size and put them put at the same place they overlap eachother perfectly. How would I make the LineChart appear to e on top of the BarChart.

目前我已经将不透明度设置为 0.7，因此它们看起来不错"，但显然这不是要走的路.

For the moment I've been setting the opacity to 0.7 of them so they 'look good' but obviously that isn't the way to go.

推荐答案

Jewelsea 发布了一个 关于要点的示例.

Jewelsea posted an example on a gist.

基本上归结为使用 StackPane 来堆叠图表并修改所有叠加层的可见性.

It basically comes down to using a StackPane for stacking the charts and modifying the visibility of all the overlays.

这是我如何使用它的一个更简单的修改版本:

Here's a simpler modified version how I use it:

public class StackedChartSample extends Application {

    final static String austria = "Austria";
    final static String brazil = "Brazil";
    final static String france = "France";
    final static String italy = "Italy";
    final static String usa = "USA";

    @Override
    public void start(Stage stage) {

        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();

        // base chart
        final BarChart<String, Number> barChart = new BarChart<String, Number>(xAxis, yAxis);
        barChart.setLegendVisible(false);
        barChart.setAnimated(false);

        xAxis.setLabel("Country");
        yAxis.setLabel("Value");

        // overlay chart
        LineChart<String, Number> lineChart = new LineChart<String, Number>(xAxis, yAxis);
        lineChart.setLegendVisible(false);
        lineChart.setAnimated(false);
        lineChart.setCreateSymbols(true);
        lineChart.setAlternativeRowFillVisible(false);
        lineChart.setAlternativeColumnFillVisible(false);
        lineChart.setHorizontalGridLinesVisible(false);
        lineChart.setVerticalGridLinesVisible(false);
        lineChart.getXAxis().setVisible(false);
        lineChart.getYAxis().setVisible(false);
        lineChart.getStylesheets().addAll(getClass().getResource("chart.css").toExternalForm());

        barChart.getData().add( createChartSeries());
        lineChart.getData().add( createChartSeries());

        StackPane root = new StackPane();
        root.getChildren().addAll( barChart, lineChart);

        Scene scene = new Scene(root, 800, 600);

        stage.setScene(scene);
        stage.show();
    }

    private XYChart.Series<String,Number> createChartSeries() {

        XYChart.Series<String,Number> series = new XYChart.Series<String,Number>();
        series.getData().add(new XYChart.Data<String,Number>(austria, 25601.34));
        series.getData().add(new XYChart.Data<String,Number>(brazil, 20148.82));
        series.getData().add(new XYChart.Data<String,Number>(france, 10000));
        series.getData().add(new XYChart.Data<String,Number>(italy, 35407.15));
        series.getData().add(new XYChart.Data<String,Number>(usa, 12000));

        return series;
    }


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

图表.css

.chart-plot-background {
-fx-background-color: transparent;
}
.default-color0.chart-series-line {
-fx-stroke: blue;
} 
.default-color0.chart-line-symbol { 
    -fx-background-color: blue, white;
}

这篇关于JavaFX 中的堆叠图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！