在条形图JavaFX的每个条形内添加图像

Question

我知道如何在条形图的每个条形图顶部或内部添加文本

private void displayLabelForData(XYChart.Data<String, Number> data) {
    final Node node = data.getNode();
    final Text dataText = new Text(data.getYValue() + "");
    node.parentProperty().addListener(new ChangeListener<Parent>() {
        @Override 
        public void changed(ObservableValue<? extends Parent> ov, Parent oldParent, Parent parent) {
            Group parentGroup = (Group) parent;
            parentGroup.getChildren().add(dataText);
        }
    });

    node.boundsInParentProperty().addListener(new ChangeListener<Bounds>() {

        @Override 
        public void changed(ObservableValue<? extends Bounds> ov, Bounds oldBounds, Bounds bounds) {
            dataText.setLayoutX(Math.round(bounds.getMinX() + bounds.getWidth() / 2 - dataText.prefWidth(-1) / 2));

            //on top of each bar
            dataText.setLayoutY(Math.round(bounds.getMinY() - dataText.prefHeight(-1) * 0.5));
        }
    });
}

或在每个酒吧内

dataText.setLayoutY(Math.round(bounds.getMinY() - dataText.prefHeight(-1) * -0.5));

我还知道如何使用 JavaFX 加载图像，并将图像显示到图像视图。

Image myImage = new Image("location.png");
ImageView viewImage = new ImageView();
viewImage.setImage(myImage);

现在假设我在酒吧图表中有5个小节，我有5个图像。

现在我想知道是否有可能将每个图像添加到条形图的每个条中。有我不知道的方法吗？

谢啦！




Answer 1

以下是如何将图像添加到 BarChart 数据的示例：

import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class BarChartExample extends Application {

    @Override 
    public void start(Stage stage) {
        stage.setTitle("Bar Chart Sample");
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        final BarChart<String, Number> barChart = new BarChart<>(xAxis, yAxis);
        barChart.setTitle("Country Summary");
        xAxis.setLabel("Country");
        yAxis.setLabel("Value");

        XYChart.Series series = new XYChart.Series();
        series.setName("2003");
        series.getData().addAll(new XYChart.Data("Brazil", 20148.82),
                new XYChart.Data("France", 10000),
                new XYChart.Data("Italy", 35407.15),
                new XYChart.Data("USA", 17000));


        Platform.runLater(() -> {
            series.getData().forEach(seriesData -> {
                XYChart.Data data = (XYChart.Data) seriesData;
                StackPane node = (StackPane) data.getNode();
                String name = (String) data.getXValue();
                ImageView imageView = getImageForCountry(name);
                imageView.fitWidthProperty().bind(node.widthProperty().multiply(.5));
                imageView.setPreserveRatio(true);
                node.getChildren().add(imageView);
            });
        });
        barChart.getData().addAll(series);
        Scene scene  = new Scene(barChart, 800, 600);
        stage.setScene(scene);
        stage.show();
    }

    private ImageView getImageForCountry(String countryName) {
        URL url = getClass().getResource(countryName.toLowerCase() + ".png");
        Image image = new Image(url);
        return new ImageView(image);
    }

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

输出：