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

chart.css

chart.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屋！